Gɔta dɛn
Gutters na di padding bitwin yu kɔlɔm dɛn, we dɛn kin yuz fɔ rispɔnsiv wan spɛs ɛn alaynɛd kɔntinyu na di Bootstrap grid sistem.
Aw dɛn de wok
-
Gɔta na di gap dɛn bitwin di tin dɛn we de insay di kɔlɔm, we dɛn mek bay ɔrizɔntal
padding
. Wi de sɛtpadding-right
ɛnpadding-left
pan ɛni kɔlɔm, ɛn yuz nɛgitivmargin
fɔ ɔfset dat na di stat ɛn ɛnd fɔ ɛni row fɔ alaynɛd kɔntinyu. -
Di gɔta dɛn kin bigin na
1.5rem
(24px
) waid. Dis de mek wi ebul fɔ mach wi grid to di padding ɛn margin spacers skel. -
Dɛn kin ajɔst di gɔta dɛn fayn fayn wan. Yuz brekpoint-spɛsifi k gɔta klas fɔ chenj ɔrizɔntal gɔta, vertikal gɔta, ɛn ɔl di gɔta dɛn.
Ɔrizɔntal gɔta dɛn
.gx-*
klas dɛn kin yuz fɔ kɔntrol di ɔrizɔntal gɔta wit dɛn. Di .container
ɔ mama ɔ .container-fluid
papa kin nid fɔ ajɔst if dɛn yuz big gɔta dɛn bak fɔ mek dɛn nɔ ful-ɔp we dɛn nɔ want, yuz wan yutiliti fɔ pad we de mach. Fɔ ɛgzampul, insay di ɛgzampul we de dɔŋ ya wi dɔn inkrisayz di padding wit .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>
Wan ɔda we fɔ sɔlv di prɔblɛm na fɔ ad wan wrap rawnd di .row
wit di .overflow-hidden
klas:
<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>
Vertikal gɔta dɛn
.gy-*
klas dɛn kin yuz fɔ kɔntrol di vertikal gɔta wit dɛn. Lɛk di ɔrizɔntal gɔta dɛn, di vertikal gɔta dɛn kin mek sɔm ɔvaflɔ dɔŋ di .row
na di ɛnd pan wan pej. If dis apin, yu ad wan wrap rawnd .row
wit di .overflow-hidden
klas:
<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>
Ɔrizɔntal & vertikal gɔta dɛn
.g-*
klas dɛn kin yuz fɔ kɔntrol di ɔrizɔntal gɔta wit, fɔ di ɛgzampul we de kam wi de yuz wan smɔl gɔta wit, so nid nɔ go de fɔ ad di .overflow-hidden
wrap klas.
<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 kɔlɔm dɛn we gɛt gɔta dɛn
Yu kin ad gɔta klas dɛn bak to row kɔlɔm dɛn . Insay di ɛgzampul we de kam, wi de yuz rispɔnsiv rɔw kɔlɔm ɛn rispɔnsiv gɔta klas dɛn.
<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>
Nɔ gɛt gɔta dɛn
Di gɔta dɛn bitwin kɔlɔm dɛn na wi grid klas dɛn we wi dɔn disayd fɔ du, yu kin pul am wit .g-0
. Dis de pul di negatif margin
s frכm .row
εn di כrizכnal padding
frכm כl di imεdiεt pikin kכlכm dεm.
Nid wan ed-to-ed dizayn? Drɔp di mama ɔ papa .container
ɔ .container-fluid
.
In praktis, na so i luk. Notis se yu kin kɔntinyu fɔ yuz dis wit ɔl di ɔda grid klas dɛn we dɛn dɔn pridifayn (inklud di kɔlɔm dɛn wit, di taya dɛn we de ansa, di ɔda tin dɛn we dɛn dɔn ɔda, ɛn ɔda tin dɛn).
<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>
Chenj di gɔta dɛn
Klas dɛn bil frɔm di $gutters
Sass map we dɛn inhɛrit frɔm di $spacers
Sass map.
$grid-gutter-width: 1.5rem;
$gutters: (
0: 0,
1: $spacer * .25,
2: $spacer * .5,
3: $spacer,
4: $spacer * 1.5,
5: $spacer * 3,
);