in English

Gutters

Gutters sune madaidaicin tsakanin ginshiƙan ku, ana amfani da su don amsa sararin samaniya da daidaita abun ciki a cikin tsarin grid na Bootstrap.

A wannan shafi

Yadda suke aiki

Gutters sune rata tsakanin abun cikin shafi, wanda aka ƙirƙira ta kwance padding. Mun saita padding-rightkuma padding-leftakan kowane ginshiƙi, kuma muna amfani da korau margindon daidaita wancan a farkon da ƙarshen kowane jere don daidaita abun ciki.
Gutters suna farawa daga 1.5rem( 24px) fadi. Wannan yana ba mu damar daidaita grid ɗinmu zuwa ma'auni da ma'aunin sarari .
Za'a iya daidaita gutters da amsa. Yi amfani da takamaiman azuzuwan gutter don gyara magudanar ruwa a kwance, magudanan ruwa na tsaye, da duk magudanan ruwa.

Gutters na kwance

.gx-*Ana iya amfani da azuzuwan don sarrafa faɗuwar gutter a kwance. Iyaye .containerko .container-fluidiyaye na iya buƙatar daidaitawa idan an yi amfani da manyan magudanan ruwa suma don guje wa ambaliya maras so, ta amfani da kayan aikin facin da ya dace. Misali, a cikin misali mai zuwa mun ƙara mashin tare da .px-4:

Kunshin ginshiƙi na al'ada

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>

Wata madadin mafita ita ce ƙara abin rufe fuska .rowtare da .overflow-hiddenajin:

Kunshin ginshiƙi na al'ada

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>

Gutters na tsaye

.gy-*Ana iya amfani da azuzuwan don sarrafa faɗin gutter na tsaye a cikin jere lokacin da ginshiƙai na naɗe zuwa sabbin layi. Kamar magudanar ruwa a kwance, magudanan ruwa na tsaye na iya haifar da ambaliya a ƙasan .rowƙarshen shafi. Idan wannan ya faru, kun ƙara abin rufe fuska .rowtare da .overflow-hiddenajin:

Kunshin ginshiƙi na al'ada

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>

A kwance & magudanan ruwa na tsaye

.g-*Ana iya amfani da azuzuwan don sarrafa faɗuwar gutter a kwance, ga misali mai zuwa muna amfani da ƙaramin faɗin gutter, don haka ba za a buƙaci ƙara .overflow-hiddenajin kunsa ba.

Kunshin ginshiƙi na al'ada

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>

ginshiƙan layi na gutters

Hakanan za'a iya ƙara azuzuwan gutter zuwa ginshiƙan jere . A cikin misali mai zuwa, muna amfani da ginshiƙan jere masu amsawa da azuzuwan gutter masu amsawa.

Rukunin layi

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>

Babu gutters

Za a iya cire magudanar ruwa tsakanin ginshiƙai a cikin azuzuwan grid ɗin da aka riga aka ayyana tare da .g-0. Wannan yana kawar da mummunan margins daga .rowda kuma kwance paddingdaga duk ginshiƙan yara nan da nan.

Kuna buƙatar ƙirar gefe-zuwa-baki? Sauke iyaye .containerko .container-fluidkuma ƙara .mx-0zuwa .rowdon hana ambaliya.

A aikace, ga yadda yake kama. Lura za ku iya ci gaba da amfani da wannan tare da duk wasu azuzuwan grid da aka ƙirƙira (gami da faɗin shafi, matakan amsawa, sake yin oda, da ƙari).

.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>

Canza gutters

An gina azuzuwan daga $gutterstaswirar Sass wanda aka gada daga $spacerstaswirar Sass.

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