ရေတံလျှောက်
Gutters များသည် Bootstrap grid စနစ်ရှိ အကြောင်းအရာများကို နေရာလွတ်နှင့် ချိန်ညှိရန်အတွက် အသုံးပြုသည့် သင်၏ကော်လံများကြားတွင် အကွက်များဖြစ်သည်။
သူတို့ဘယ်လိုအလုပ်လုပ်လဲ။
-
ရေတံလျှောက်များသည် အလျားလိုက်ဖြင့် ဖန်တီးထားသော ကော်လံအကြောင်းအရာများကြား ကွာဟချက်
padding
ဖြစ်သည်။ ကျွန်ုပ်တို့သည် အကြောင်းအရာကို ညှိရန် အတန်းတစ်ခုစီ၏ အစနှင့်အဆုံးတွင် ၎င်းကို နှိမ်ရန် ကော်လံတစ်ခုစီတွင် သတ်မှတ်ပြီး အနုတ်ကိုpadding-right
အသုံးပြုpadding-left
ပါသည် ။margin
-
ရေတံခွန်များသည်
1.5rem
(24px
) ကျယ်ဝန်းသည်။ ၎င်းသည် ကျွန်ုပ်တို့အား ကျွန်ုပ်တို့၏ grid အား padding နှင့် margin spacers စကေးနှင့် တွဲနိုင်စေပါသည်။ -
ရေတံလျှောက်များကို တုံ့ပြန်မှုဖြင့် ချိန်ညှိနိုင်သည်။ အလျားလိုက်ရေမြောင်းများ၊ ဒေါင်လိုက်ရေမြောင်းများနှင့် ရေတံလျှောက်အားလုံးကို မွမ်းမံပြင်ဆင်ရန်အတွက် ခွဲမှတ်-သတ်မှတ်ထားသော ရေတံလျှောက်အတန်းများကို အသုံးပြုပါ။
အလျားလိုက် ရေမြောင်းများ
.gx-*
အလျားလိုက် ရေမြောင်း အကျယ်ကို ထိန်းချုပ်ရန် အတန်းများကို အသုံးပြုနိုင်သည်။ ကိုက်ညီသော padding utility ကိုအသုံးပြု၍ မလိုလားအပ်သောရေလျှံခြင်းကိုရှောင်ရှားရန် ပိုကြီးသောရေမြောင်းများကိုအသုံးပြုပါ က .container
သို့မဟုတ် .container-fluid
မိဘအား ချိန်ညှိရန်လိုအပ်နိုင်ပါသည်။ ဥပမာအားဖြင့်၊ အောက်ပါဥပမာတွင် ကျွန်ုပ်တို့သည် padding ကိုတိုးမြှင့်ထားသည် .px-4
။
<div class="container px-4">
<div class="row gx-5">
<div class="col">
<div class="p-3 border bg-light">Custom column padding</div>
</div>
<div class="col">
<div class="p-3 border bg-light">Custom column padding</div>
</div>
</div>
</div>
အခြားနည်းလမ်းတစ်ခုသည် အတန်း .row
နှင့်အတူ ပတ်ပတ်လည်တွင် ထုပ်ပိုးမှုတစ်ခုကို ထည့်ရန်ဖြစ်သည် .overflow-hidden
-
<div class="container overflow-hidden">
<div class="row gx-5">
<div class="col">
<div class="p-3 border bg-light">Custom column padding</div>
</div>
<div class="col">
<div class="p-3 border bg-light">Custom column padding</div>
</div>
</div>
</div>
ဒေါင်လိုက်ရေမြောင်းများ
.gy-*
ဒေါင်လိုက်ရေမြောင်း width ကိုထိန်းချုပ်ရန်အတန်းများကိုသုံးနိုင်သည်။ .row
အလျားလိုက်ရေမြောင်းများကဲ့သို့ပင်၊ ဒေါင်လိုက်ရေမြောင်းများ သည် စာမျက်နှာတစ်ခု၏အဆုံးတွင် အောက်ဘက်တွင် ရေလျှံမှုအချို့ကို ဖြစ်စေနိုင်သည် ။ .row
၎င်းဖြစ်လျှင် သင်သည် အတန်း နှင့် ပတ်၀န်းကျင်တွင် ပတ်၀န်းကျင်တစ်ခုကို ပေါင်းထည့်သည် .overflow-hidden
-
<div class="container overflow-hidden">
<div class="row gy-5">
<div class="col-6">
<div class="p-3 border bg-light">Custom column padding</div>
</div>
<div class="col-6">
<div class="p-3 border bg-light">Custom column padding</div>
</div>
<div class="col-6">
<div class="p-3 border bg-light">Custom column padding</div>
</div>
<div class="col-6">
<div class="p-3 border bg-light">Custom column padding</div>
</div>
</div>
</div>
အလျားလိုက်နှင့် ဒေါင်လိုက် ရေမြောင်းများ
.g-*
.overflow-hidden
အလျားလိုက် ရေမြောင်းအကျယ်များကို ထိန်းချုပ်ရန် အတန်းများကို အသုံးပြုနိုင်ပြီး၊ အောက်ဖော်ပြပါ ဥပမာအနေဖြင့် ကျွန်ုပ်တို့သည် သေးငယ်သော gutter width ကို အသုံးပြုသောကြောင့် wrapper class ကို ထည့်ရန်မလိုအပ်ပါ ။
<div class="container">
<div class="row g-2">
<div class="col-6">
<div class="p-3 border bg-light">Custom column padding</div>
</div>
<div class="col-6">
<div class="p-3 border bg-light">Custom column padding</div>
</div>
<div class="col-6">
<div class="p-3 border bg-light">Custom column padding</div>
</div>
<div class="col-6">
<div class="p-3 border bg-light">Custom column padding</div>
</div>
</div>
</div>
အတန်းတိုင်များ ရေမြောင်းများ
ရေတံလျှောက် အတန်းများကို အတန်းကော်လံ များတွင်လည်း ထည့်နိုင်သည် ။ အောက်ပါဥပမာတွင်၊ ကျွန်ုပ်တို့သည် တုံ့ပြန်မှုအတန်းကော်လံများနှင့် တုံ့ပြန်မှုရှိသောရေမြောင်းအတန်းများကို အသုံးပြုပါသည်။
<div class="container">
<div class="row row-cols-2 row-cols-lg-5 g-2 g-lg-3">
<div class="col">
<div class="p-3 border bg-light">Row column</div>
</div>
<div class="col">
<div class="p-3 border bg-light">Row column</div>
</div>
<div class="col">
<div class="p-3 border bg-light">Row column</div>
</div>
<div class="col">
<div class="p-3 border bg-light">Row column</div>
</div>
<div class="col">
<div class="p-3 border bg-light">Row column</div>
</div>
<div class="col">
<div class="p-3 border bg-light">Row column</div>
</div>
<div class="col">
<div class="p-3 border bg-light">Row column</div>
</div>
<div class="col">
<div class="p-3 border bg-light">Row column</div>
</div>
<div class="col">
<div class="p-3 border bg-light">Row column</div>
</div>
<div class="col">
<div class="p-3 border bg-light">Row column</div>
</div>
</div>
</div>
ရေမြောင်းများမရှိ။
ကျွန်ုပ်တို့၏ ကြိုတင်သတ်မှတ်ထားသော ဂရစ်အတန်းများအတွင်းရှိ ကော်လံများကြားရှိ ရေမြောင်းများကို ဖယ်ရှားနိုင်သည် .g-0
။ ၎င်းသည် အနုတ်လက္ခဏာ margin
s .row
နှင့် အလျားလိုက် padding
ကို ချက်ချင်းကလေးကော်လံများအားလုံးမှ ဖယ်ရှားသည်။
edge-to-edge ဒီဇိုင်းလိုပါသလား။ မိဘကို စွန့်ပစ် .container
ပါ .container-fluid
။
လက်တွေ့မှာတော့ ဒါက ဘယ်လိုပုံစံမျိုးလဲ။ အခြားကြိုတင်သတ်မှတ်ထားသော ဂရစ်အတန်းများ (ကော်လံအကျယ်များ၊ တုံ့ပြန်မှုအဆင့်များ၊ ပြန်လည်မှာယူမှုများ နှင့် အခြားအရာများအပါအဝင်) ၎င်းကို သင်သည် ဆက်လက်အသုံးပြုနိုင်ကြောင်း သတိပြုပါ။
<div class="row g-0">
<div class="col-sm-6 col-md-8">.col-sm-6 .col-md-8</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>
ရေမြောင်းများပြောင်းပါ။
အတန်းများကို $gutters
Sass map မှ အမွေဆက်ခံသော Sass map မှ တည်ဆောက် $spacers
ထားပါသည်။
$grid-gutter-width: 1.5rem;
$gutters: (
0: 0,
1: $spacer * .25,
2: $spacer * .5,
3: $spacer,
4: $spacer * 1.5,
5: $spacer * 3,
);