အကွာ

Bootstrap တွင် ဒြပ်စင်တစ်ခု၏အသွင်အပြင်ကိုမွမ်းမံရန်အတွက် ကျယ်ပြန့်သောလက်တိုတုံ့ပြန်မှုအနားသတ်နှင့် padding utility အတန်းများပါဝင်သည်။

ဘယ်လိုအလုပ်လုပ်လဲ

တုံ့ပြန်မှု အဆင်ပြေသော marginသို့မဟုတ် paddingတန်ဖိုးများကို အတိုချုံး အတန်းများဖြင့် ၎င်း၏ ဘက်ခြမ်း၏ အပိုင်းခွဲတစ်ခုသို့ သတ်မှတ်ပေးပါ။ တစ်သီးပုဂ္ဂလဂုဏ်သတ္တိများ၊ ဂုဏ်သတ္တိများအားလုံးနှင့် ဒေါင်လိုက်နှင့် အလျားလိုက် ဂုဏ်သတ္တိများအတွက် ပံ့ပိုးမှု ပါဝင်သည်။ အတန်းများကို မူလ Sass မြေပုံမှ တည်ဆောက် .25remထားသည် 3rem။

ရလျှင်

ခွဲမှတ်အားလုံးနှင့် သက်ဆိုင်သော အကွာအဝေး xsမှ xl၊ ၎င်းမှာ အဆိုပါအတန်းများကို နှင့်အထက်တွင် အသုံးချသောကြောင့် min-width: 0ဖြစ်ပြီး၊ ထို့ကြောင့် မီဒီယာမေးမြန်းမှုဖြင့် ကန့်သတ်ထားခြင်းမရှိပါ။ သို့သော် ကျန်ရှိသော ဖြတ်မှတ်များတွင် ခွဲမှတ်အတိုကောက်ပါ၀င်သည်။

အတန်းများကို {property}{sides}-{size}for xsand {property}{sides}-{breakpoint}-{size}for sm, md, lg, and xl.

ပစ္စည်းဥစ္စာ သည် အ ဘယ်မှာ ရှိသနည်း၊

• m- သတ်မှတ်အတန်းများအတွက်margin
• p- သတ်မှတ်အတန်းများအတွက်padding

နှစ်ဖက်စလုံး သည် မည်သည့်နေရာတွင် ရှိသည် -

• t- သတ်မှတ်အတန်းများအတွက် margin-topသို့မဟုတ်padding-top
• b- သတ်မှတ်အတန်းများအတွက် margin-bottomသို့မဟုတ်padding-bottom
• l- သတ်မှတ်အတန်းများအတွက် margin-leftသို့မဟုတ်padding-left
• r- သတ်မှတ်အတန်းများအတွက် margin-rightသို့မဟုတ်padding-right
• x*-left- နှစ်ခု လုံး သတ်မှတ်ထားသောအတန်းများအတွက်*-right
• y*-top- နှစ်ခု လုံး သတ်မှတ်ထားသောအတန်းများအတွက်*-bottom
• blank - ဒြပ်စင်၏ 4 ဘက်စလုံးတွင် marginသို့မဟုတ် သတ်မှတ်သည့် အတန်းများအတွက်padding

အရွယ်အစား သည် မည်သည့်နေရာတွင် ရှိသည် -

• 0margin- padding၎င်းကိုသတ်မှတ်ခြင်းဖြင့် ဖယ်ရှားသောအတန်းများအတွက်0
• 1margin- သို့မဟုတ် သတ်မှတ်ထားသောအတန်းများအတွက် (မူလအားဖြင့် padding)$spacer * .25
• 2margin- သို့မဟုတ် သတ်မှတ်ထားသောအတန်းများအတွက် (မူလအားဖြင့် padding)$spacer * .5
• 3margin- သို့မဟုတ် သတ်မှတ်ထားသောအတန်းများအတွက် (မူလအားဖြင့် padding)$spacer
• 4margin- သို့မဟုတ် သတ်မှတ်ထားသောအတန်းများအတွက် (မူလအားဖြင့် padding)$spacer * 1.5
• 5margin- သို့မဟုတ် သတ်မှတ်ထားသောအတန်းများအတွက် (မူလအားဖြင့် padding)$spacer * 3
• automargin- အလိုအလျောက် သတ်မှတ်ထားသောအတန်းများအတွက်

$spacers( Sass map variable တွင် entry များကို ပေါင်းထည့်ခြင်းဖြင့် အရွယ်အစားများကို ထပ်မံထည့်သွင်း နိုင်ပါသည်။)

ဥပမာများ

ဤအတန်းများ၏ ကိုယ်စားလှယ်အချို့ ဥပမာများမှာ-

.mt-0 {
  margin-top: 0 !important;
}

.ml-1 {
  margin-left: ($spacer * .25) !important;
}

.px-2 {
  padding-left: ($spacer * .5) !important;
  padding-right: ($spacer * .5) !important;
}

.p-3 {
  padding: $spacer !important;
}

အလျားလိုက်ဗဟိုပြုခြင်း။

ထို့အပြင်၊ Bootstrap တွင် အလျားလိုက် အနားသတ်များကို သတ်မှတ်ခြင်းဖြင့် .mx-autoပုံသေ-အကျယ်ပိတ်ဆို့သည့်အဆင့် အကြောင်းအရာ—ဆိုလိုသည်မှာ၊ ပါရှိသည့် အကြောင်းအရာ display: blockနှင့် widthအစုံလိုက်—အလျားလိုက် အနားသတ်များကို သတ်မှတ်ခြင်းဖြင့် အလျားလိုက်ဗဟိုပြုသည့် အတန်းတစ်ခု autoပါရှိသည်။

<div class="mx-auto" style="width: 200px;">
  Centered element
</div>