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.
Ç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înepadding-right
ûpadding-left
negatîf bikar tîninmargin
da 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 .container
an .container-fluid
dêû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
:
<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>
Çareseriyek alternatîf ev e ku meriv pêçekek li dora .row
bi .overflow-hidden
polê zêde bike:
<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>
Germên vertîkal
.gy-*
çîn dikarin ji bo kontrolkirina firehiyên golê yên vertîkal werin bikar anîn. Mîna kelûpelên horizontî, kelûpelên vertîkal dikarin .row
di dawiya rûpelekê de bibin sedem ku di binê rûpelê de hin zêde zêde bibin. .row
Ger ev çêbibe, hûn li derûdora .overflow-hidden
dersê pêçek lê zêde dikin:
<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>
Kevirên Horizontal & Vertîkal
.g-*
çîn dikarin ji bo kontrolkirina firehiyên guhê yên horizontî werin bikar anîn, ji bo nimûneya 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.
<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>
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.
<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>
Ne gemar
Kevirên di navbera stûnan de di çînên meya tora meya pêşwext de dikarin bi .g-0
. margin
Ev s -yên neyînî .row
û horizontî padding
ji hemî stûnên zarokan ên yekser radike.
Pêdivî ye ku sêwiranek qev-bi-qewim? Dêûbav .container
an bavêjin .container-fluid
.
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).
<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>
Gûçikan biguherînin
Ders ji nexşeya Sass-ê $gutters
ku 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,
);