Tsiɖɔɖɔɖɔƒewo
Gutters nye padding si le wò sɔtiwo dome, si wozãna tsɔ ɖoa dometsotso kple ɖoɖo ɖe nusiwo le Bootstrap grid ɖoɖoa me ŋu nyuie.
Ale si wowɔa dɔe
-
Gutters nye dometsotso siwo le sɔtiwo me nyawo dome, si wowɔ to horizontal
padding
. Míeɖoapadding-right
kplepadding-left
ɖe sɔti ɖesiaɖe dzi, eye míezãa negativemargin
tsɔ xea mɔ na ema le fli ɖesiaɖe ƒe gɔmedzedze kple nuwuwu tsɔ ɖoa emenyawo ɖe ɖoɖo nu. -
Tsiɖɔɖɔɖɔƒewo dzea egɔme tso
1.5rem
(24px
) kekeme. Esia wɔnɛ be míete ŋu sɔna kple míaƒe grid la kple padding kple margin spacers scale la. -
Woate ŋu atrɔ asi le tsiɖɔɖɔɖɔɖɔƒewo ŋu wòasɔ ɖe wo nɔewo nu. Zã tsidzɔƒe ƒe hatsotso siwo ku ɖe breakpoint koŋ ŋu nàtsɔ atrɔ asi le tsiɖɔɖɔɖɔɖɔƒe siwo le tsia dzi, tsiɖɔɖɔɖɔɖɔƒe siwo le tsitrenu, kple tsiɖɔɖɔɖɔɖɔƒewo katã ŋu.
Tɔdzisasrã siwo le tsia dzi
.gx-*
woate ŋu azã klasswo atsɔ akpɔ tsiɖɔɖɔ ƒe kekeme siwo le tsia dzi la dzi. Ðewohĩ ahiã be woatrɔ asi le .container
alo .container-fluid
dzila la ŋu ne wozã tsiɖɔɖɔɖɔƒe gãwo hã be woaƒo asa na tsi si yɔ fũu si womedi o, eye woazã padding utility si sɔ kplii. Le kpɔɖeŋu me, le kpɔɖeŋu si gbɔna me la míedzi padding la ɖe edzi kple .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>
Egbɔkpɔnu bubue nye be nàtsɔ agbalẽ xatsaxatsa aɖe akpe ɖe eŋu le .row
kple .overflow-hidden
klass la:
<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>
Tɔdzisasrã siwo le tsitrenu
.gy-*
woate ŋu azã klasswo atsɔ akpɔ tsiɖɔɖɔɖɔƒea ƒe kekeme siwo le tsitrenu la dzi. Abe tsidzɔƒe siwo le tsia dzi ene la, tsidzɔƒe siwo le tsitrenu ate ŋu ana tsi .row
naɖo tsia dzi vie le axa aɖe ƒe nuwuwu la te. Ne esia dzɔ la, ètsɔa agbalẽ xatsaxatsa aɖe kpena .row
ɖe .overflow-hidden
klass la ŋu:
<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>
Horizontal & tsitrenu tsidzɔƒewo
.g-*
woateŋu azã klasswo atsɔ akpɔ tsiɖɔɖɔ ƒe kekeme siwo le tsia dzi la dzi, na kpɔɖeŋu si gbɔna la míezãa tsiɖɔɖɔ ƒe kekeme si le sue wu, eyata mahiã be woatsɔ .overflow-hidden
wrapper ƒe hatsotso la akpe ɖe eŋu o.
<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>
Fli sɔtiwo gutters
Woate ŋu atsɔ gutter ƒe klasswo hã akpe ɖe fli ƒe sɔtiwo ŋu . Le kpɔɖeŋu si gbɔna me la, míezãa fli ƒe sɔti siwo ɖoa nya ŋu kple gutter ƒe hatsotso siwo ɖoa nya ŋu.
<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>
Tɔdzisasrã aɖeke meli o
Woate ŋu aɖe tsiɖɔɖɔ siwo le sɔtiwo dome le míaƒe grid ƒe hatsotso siwo míeɖo do ŋgɔ me la ɖa kple .g-0
. Esia ɖea margin
s manyomanyowo ɖa le ɖeviwo ƒe sɔti siwo katã le enumake .row
la me kple esiwo le tsia dzi la ɖa.padding
Èhiã aɖaŋu si wowɔ tso nugbɔ vaseɖe nugbɔa? Ðe dzila la ɖa .container
alo .container-fluid
.
Le nuwɔna me la, alesi wòdzenae nye esi. De dzesii be àteŋu ayi edzi azã esia kple grid ƒe hatsotso bubu siwo katã woɖo ɖi do ŋgɔ (siwo dometɔ aɖewoe nye sɔtiwo ƒe kekeme, ŋuɖoɖo ƒe dzidzenuwo, ɖoɖo yeyewo, kple bubuwo).
<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>
Trɔ tsiɖɔɖɔɖɔƒeawo
Wotua klasswo tso $gutters
Sass ƒe anyigbatata si ƒe dome wonyi tso $spacers
Sass ƒe anyigbatata me.
$grid-gutter-width: 1.5rem;
$gutters: (
0: 0,
1: $spacer * .25,
2: $spacer * .5,
3: $spacer,
4: $spacer * 1.5,
5: $spacer * 3,
);