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">
<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">
<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. 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">
<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">
<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">
<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
.
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">
<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,
);