ရေတံလျှောက်

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။

စိတ်ကြိုက်ကော်လံအကွက်များ

html

<div class="container px-4 text-center">
  <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-

စိတ်ကြိုက်ကော်လံအကွက်များ

html

<div class="container overflow-hidden text-center">
  <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-*ကော်လံများသည် လိုင်းအသစ်များသို့ ပတ်သည့်အခါ အတန်းတစ်ခုအတွင်း ဒေါင်လိုက်ရေမြောင်း အကျယ်များကို ထိန်းချုပ်ရန် အတန်းများကို အသုံးပြုနိုင်သည်။ .rowအလျားလိုက်ရေမြောင်းများကဲ့သို့ပင်၊ ဒေါင်လိုက်ရေမြောင်းများ သည် စာမျက်နှာတစ်ခု၏အဆုံးတွင် အောက်ဘက်တွင် ရေလျှံမှုအချို့ကို ဖြစ်စေနိုင်သည် ။ .rowထိုသို့ဖြစ်လျှင် သင်သည် အတန်း နှင့် ပတ်၀န်းကျင်တွင် ပတ်၀န်းကျင်တစ်ခုကို ပေါင်းထည့်သည် .overflow-hidden-

စိတ်ကြိုက်ကော်လံအကွက်များ

html

<div class="container overflow-hidden text-center">
  <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 ကို ထည့်ရန်မလိုအပ်ပါ ။

စိတ်ကြိုက်ကော်လံအကွက်များ

html

<div class="container text-center">
  <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>

အတန်းတိုင်များ ရေမြောင်းများ

ရေတံလျှောက် အတန်းများကို အတန်းကော်လံ များတွင်လည်း ထည့်နိုင်သည် ။ အောက်ပါဥပမာတွင်၊ ကျွန်ုပ်တို့သည် တုံ့ပြန်မှုအတန်းကော်လံများနှင့် တုံ့ပြန်မှုရှိသောရေမြောင်းအတန်းများကို အသုံးပြုပါသည်။

အတန်းကော်လံ

html

<div class="container text-center">
  <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။ ၎င်းသည် အနုတ်လက္ခဏာ margins .rowနှင့် အလျားလိုက် paddingကို ချက်ချင်းကလေးကော်လံများအားလုံးမှ ဖယ်ရှားသည်။

edge-to-edge ဒီဇိုင်းလိုပါသလား။ အ လျှံပယ်မဖြစ်အောင် မိဘကို ပစ်ချ ပါ .containerသို့မဟုတ် .container-fluidပေါင်းထည့်ပါ ။.mx-0.row

လက်တွေ့မှာတော့ ဒါက ဘယ်လိုပုံစံမျိုးလဲ။ အခြားကြိုတင်သတ်မှတ်ထားသော ဂရစ်အတန်းများ (ကော်လံအကျယ်များ၊ တုံ့ပြန်မှုအဆင့်များ၊ ပြန်လည်မှာယူမှုများ နှင့် အခြားအရာများအပါအဝင်) ၎င်းကို သင်သည် ဆက်လက်အသုံးပြုနိုင်ကြောင်း သတိပြုပါ။

.col-sm-6 .col-md-8

.col-6 .col-md-4

html

<div class="row g-0 text-center">
  <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>

ရေမြောင်းများပြောင်းပါ။

အတန်းများကို $guttersSass 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,
);