Goutyè yo
Goutyè yo se padding ki genyen ant kolòn ou yo, yo itilize pou reponn ak aliman kontni nan sistèm nan kadriyaj Bootstrap.
Ki jan yo travay
-
Goutyè yo se twou vid ki genyen ant kontni kolòn, ki te kreye pa orizontal
padding
. Nou metepadding-right
akpadding-left
sou chak kolòn, epi sèvi ak negatifmargin
konpanse sa nan kòmansman ak nan fen chak ranje aliman kontni. -
Goutyè yo kòmanse nan
1.5rem
(24px
) lajè. Sa a pèmèt nou matche ak kadriyaj nou an ak echèl la padding ak espas maj . -
Goutyè yo ka ajiste an repons. Sèvi ak klas rupture-espesifik goutyè pou modifye goutyè orizontal, goutyè vètikal, ak tout goutyè.
Goutyè orizontal
.gx-*
klas yo ka itilize pou kontwole lajè goutyè orizontal yo. Paran an .container
ka .container-fluid
bezwen ajiste si pi gwo goutyè yo itilize tou pou evite debòde sipèfli, lè l sèvi avèk yon sèvis piblik matche. Pou egzanp, nan egzanp sa a nou te ogmante padding la ak .px-4
:
<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>
Yon solisyon altènatif se ajoute yon anbalaj alantou klas .row
la .overflow-hidden
:
<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>
Goutyè vètikal
.gy-*
klas yo ka itilize pou kontwole lajè goutyè vètikal yo nan yon ranje lè kolòn vlope nan nouvo liy. Tankou goutyè orizontal yo, goutyè vètikal yo ka lakòz kèk debòde anba a .row
nan fen yon paj. Si sa rive, ou ajoute yon wrapper alantou .row
ak .overflow-hidden
klas la:
<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>
Goutyè orizontal & vètikal
.g-*
klas yo ka itilize pou kontwole lajè goutyè orizontal yo, pou egzanp sa a nou itilize yon lajè goutyè ki pi piti, kidonk pa pral gen yon bezwen ajoute .overflow-hidden
klas la wrapper.
<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>
Ranje kolòn goutyè
Yo ka ajoute klas goutyè nan kolòn ranje tou . Nan egzanp sa a, nou itilize kolòn ranje ki reponn ak klas goutyè ki reponn.
<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>
Pa gen goutyè
Goutyè ki genyen ant kolòn nan klas griy predefini nou yo ka retire ak .g-0
. Sa a retire negatif margin
yo nan .row
ak orizontal la padding
nan tout kolòn timoun imedya.
Bezwen yon konsepsyon kwen-a-bò? Lage paran an .container
oswa .container-fluid
epi ajoute .mx-0
nan .row
pou anpeche debòde.
Nan pratik, men ki jan li sanble. Remake byen ou ka kontinye itilize sa a ak tout lòt klas griy predefini (ki gen ladan lajè kolòn, nivo ki reponn, rekòmande, ak plis ankò).
<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>
Chanje goutyè yo
Klas yo bati nan $gutters
kat Sass la ki eritye nan $spacers
kat Sass la.
$grid-gutter-width: 1.5rem;
$gutters: (
0: 0,
1: $spacer * .25,
2: $spacer * .5,
3: $spacer,
4: $spacer * 1.5,
5: $spacer * 3,
);