غوټۍ

ګټرونه ستاسو د کالمونو تر مینځ پیډینګ دي، چې د بوټسټریپ گرډ سیسټم کې د ځای او مینځپانګې تنظیم کولو لپاره کارول کیږي.

په دې پاڼه کې

دوی څنګه کار کوي

ګټرونه د کالم مینځپانګې ترمینځ تشې دي چې د افقی لخوا رامینځته شوي padding. موږ په هر کالم کې تنظیم کوو ، padding-rightاو د مینځپانګې د تنظیم کولو لپاره د هر قطار په پیل او پای کې د بندولو padding-leftلپاره منفي کاروو .margin
ګترونه په 1.5rem( 24px) پراخه پیل کیږي. دا موږ ته اجازه راکوي چې زموږ گرډ د پیډینګ او مارجین سپیسر پیمان سره مل کړو.
ګټرونه په ځواب ویونکي ډول تنظیم کیدی شي. د افقی ګټرونو، عمودی ګټرونو، او ټولو ګټرونو ترمیمولو لپاره د وقفې نقطې ځانګړي ګټر ټولګي وکاروئ.

افقی ګیټرز

.gx-*ټولګي د افقی ګټر عرض کنټرول لپاره کارول کیدی شي. .containerیا والدین ممکن د .container-fluidسمون کولو ته اړتیا ولري که چیرې لوی ګټرونه هم وکارول شي ترڅو د ناغوښتل شوي جریان څخه مخنیوی وشي ، د مطابقت لرونکي پیډینګ افادیت په کارولو سره. د مثال په توګه، په لاندې مثال کې موږ پیډینګ د دې سره زیات کړی دی .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-*ټولګي د عمودی ګټر عرض کنټرول لپاره کارول کیدی شي. د افقی ګترونو په څیر، عمودی ګټرونه کولی شي .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ټولګي د افقی ګټر پلنوالی کنټرول لپاره کارول کیدی شي، د لاندې مثال لپاره موږ د کوچني ګټر پلنوالی کاروو، نو د ریپر ټولګي اضافه کولو ته اړتیا نشته .

د دودیز کالم پیډینګ

<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. دا د ټولو سمدستي ماشومانو کالمونو څخه منفي margins .rowاو افقی لیرې کوي.padding

د څنډې څخه تر څنډې ډیزاین ته اړتیا لرئ؟ مور او پلار پریږدئ .containerیا.container-fluid

په عمل کې، دلته دا څنګه ښکاري. په یاد ولرئ چې تاسو کولی شئ دا د نورو ټولو پخوانیو تعریف شوي گرډ ټولګیو سره کارولو ته دوام ورکړئ (پشمول د کالم پلنوالی، ځواب ویونکي درجې، بیا ترتیبونه، او نور).

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

.col-6 .col-md-4

<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کوم چې د ساس نقشې څخه په میراث $spacersپاتې دي.

$grid-gutter-width: 1.5rem;
$gutters: (
  0: 0,
  1: $spacer * .25,
  2: $spacer * .5,
  3: $spacer,
  4: $spacer * 1.5,
  5: $spacer * 3,
);