Gutters
Gutters sune madaidaicin tsakanin ginshiƙan ku, ana amfani da su don amsa sararin samaniya da daidaita abun ciki a cikin tsarin grid na Bootstrap.
Yadda suke aiki
-
Gutters sune rata tsakanin abun cikin shafi, wanda aka ƙirƙira ta kwance
padding
. Mun saitapadding-right
kumapadding-left
akan kowane ginshiƙi, kuma muna amfani da koraumargin
don daidaita wancan a farkon da ƙarshen kowane jere don daidaita abun ciki. -
Gutters suna farawa daga
1.5rem
(24px
) fadi. Wannan yana ba mu damar daidaita grid ɗinmu zuwa ma'auni da ma'aunin sarari . -
Za'a iya daidaita gutters da amsa. Yi amfani da takamaiman azuzuwan gutter don gyara magudanar ruwa a kwance, magudanan ruwa na tsaye, da duk magudanan ruwa.
Gutters na kwance
.gx-*
Ana iya amfani da azuzuwan don sarrafa faɗuwar gutter a kwance. Iyaye .container
ko .container-fluid
iyaye na iya buƙatar daidaitawa idan an yi amfani da manyan magudanan ruwa suma don guje wa ambaliya maras so, ta amfani da kayan aikin facin da ya dace. Misali, a cikin misali mai zuwa mun ƙara mashin tare da .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>
Wata madadin mafita ita ce ƙara abin rufe fuska .row
tare da .overflow-hidden
ajin:
<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>
Gutters na tsaye
.gy-*
ana iya amfani da azuzuwan don sarrafa faɗuwar gutter na tsaye. Kamar magudanar ruwa a kwance, magudanan ruwa na tsaye na iya haifar da ambaliya a ƙasan .row
ƙarshen shafi. Idan wannan ya faru, kun ƙara abin rufe fuska .row
tare da .overflow-hidden
ajin:
<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>
A kwance & magudanan ruwa na tsaye
.g-*
Ana iya amfani da azuzuwan don sarrafa faɗuwar gutter a kwance, ga misali mai zuwa muna amfani da ƙaramin faɗin gutter, don haka ba za a buƙaci ƙara .overflow-hidden
ajin kunsa ba.
<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>
ginshiƙan layi na gutters
Hakanan za'a iya ƙara azuzuwan gutter zuwa ginshiƙan jere . A cikin misali mai zuwa, muna amfani da ginshiƙan jere masu amsawa da azuzuwan gutter masu amsawa.
<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>
Babu gutters
Za a iya cire magudanar ruwa tsakanin ginshiƙai a cikin azuzuwan grid ɗin da aka riga aka ayyana tare da .g-0
. Wannan yana kawar da mummunan margin
s daga .row
da kuma kwance padding
daga duk ginshiƙan yara nan da nan.
Kuna buƙatar ƙirar gefe-zuwa-baki? Sauke iyaye .container
ko .container-fluid
.
A aikace, ga yadda yake kama. Lura za ku iya ci gaba da amfani da wannan tare da duk wasu azuzuwan grid da aka ƙirƙira (gami da faɗin shafi, matakan amsawa, sake yin oda, da ƙari).
<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>
Canza gutters
An gina azuzuwan daga $gutters
taswirar Sass wanda aka gada daga $spacers
taswirar Sass.
$grid-gutter-width: 1.5rem;
$gutters: (
0: 0,
1: $spacer * .25,
2: $spacer * .5,
3: $spacer,
4: $spacer * 1.5,
5: $spacer * 3,
);