Gutters

Gûter pêlên di navbera stûnên we de ne, ku ji bo bersivdayînê cîh û naverok di pergala tora Bootstrap de rêz bikin têne bikar anîn.

Li ser vê rûpelê

Çawa ew dixebitin

Gutter valahiyên di navbera naveroka stûnê de ne, ku ji hêla horizontal ve têne afirandin padding. Em li ser her stûnê danîne padding-rightû padding-leftnegatîf bikar tînin marginda ku wê di destpêk û dawiya her rêzê de ji hev derxînin da ku naverokê hevrêz bikin.
Kevir bi 1.5rem( 24px) fireh dest pê dikin. Ev dihêle ku em tora xwe bi pîvana padding û margin spacers re li hev bikin.
Gutters dikarin bi bersivê bêne sererast kirin. Ji bo guheztina kelûpelên horizontî, gemarên vertîkal, û hemî kelûpelên çîpên gemarê yên xala veqetandinê bikar bînin.

Germên Horizontal

.gx-*çîn dikarin ji bo kontrolkirina firehiyên golê yên horizontal werin bikar anîn. Dibe ku pêdivî ye ku dêûbav .containeran .container-fluiddêûbav were sererast kirin heke gulên mezintir jî werin bikar anîn da ku ji zêdebûna nedilxwaz dûr bikevin, bi karanîna karûbarek pêlavê ya lihevhatî. Mînakî, di mînaka jêrîn de me peldank bi .px-4:

Padding stûna Custom

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>

Çareseriyek alternatîf ev e ku meriv pêçekek li dora .rowbi .overflow-hiddenpolê zêde bike:

Padding stûna Custom

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>

Germên vertîkal

.gy-*dema ku stûn bi xêzên nû ve girêdidin, ders dikarin ji bo kontrolkirina firehiyên gupika vertîkal ên di nav rêzekê de werin bikar anîn. Mîna kelûpelên horizontî, kelûpelên vertîkal dikarin .rowdi dawiya rûpelekê de bibin sedem ku di binê rûpelê de hin zêde zêde bibin. .rowGer ev çêbibe, hûn li derûdora .overflow-hiddendersê pêçek lê zêde dikin:

Padding stûna Custom

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>

Kevirên Horizontal & Vertîkal

.g-*ders dikarin ji bo kontrolkirina firehiyên guhê yên horizontî werin bikar anîn, ji bo mînaka jêrîn em firehiyek guhê piçûktir bikar tînin, ji ber vê yekê dê hewce nebe ku .overflow-hiddençîna pêçanê lê zêde bikin.

Padding stûna Custom

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>

Row stûnên gutters

Dersên gutterê jî dikarin li stûnên rêzê werin zêdekirin . Di mînaka jêrîn de, em stûnên rêza bersivdar û çînên gutterê yên bersivdar bikar tînin.

Stûna rêzê

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>

Ne gemar

Kevirên di navbera stûnan de di çînên meya tora meya pêşwext de dikarin bi .g-0. marginEv s -yên neyînî .rowû horizontî paddingji hemî stûnên zarokan ên yekser radike.

Pêdivî ye ku sêwiranek qev-bi-qewim? Dêûbav .containeran bavêjin .container-fluidû lê zêde .mx-0bikin da .rowku pêşî li zêdebûnê bigirin.

Di pratîkê de, li vir çawa xuya dike. Têbînî ku hûn dikarin vê yekê bi hemî dersên torê yên pêşwextkirî yên din re bikar bînin (tevî firehiyên stûnê, rêzikên bersivdar, ji nû ve rêzkirin, û hêj bêtir).

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

Gûçikan biguherînin

Ders ji nexşeya Sass-ê $guttersku ji nexşeya Sass-ê mîras maye têne çêkirin $spacers.

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