Emifulejje
Gutters ye padding wakati wa columns zo, ekozesebwa responsively space n'okusengeka ebirimu mu Bootstrap grid system.
Engeri gye zikolamu
-
Gutters bye bifo ebiri wakati w’ebirimu empagi, ebitondebwawo horizontal
padding
. Tuteekapadding-right
nepadding-left
ku buli mpagi, era tukozesa negativumargin
okuziyiza ekyo ku ntandikwa n’enkomerero ya buli lunyiriri okulaganya ebirimu. -
Emifulejje gitandika ku
1.5rem
(24px
) obugazi. Kino kitusobozesa okukwataganya grid yaffe ku padding ne margin spacers scale. -
Gutters zisobola okutereezebwa mu ngeri eddamu. Kozesa ebika by’emifulejje egy’enjawulo egy’okumenya okukyusa emifulejje egy’okwebungulula, emifulejje egy’okwesimbye, n’emidumu gyonna.
Emifulejje egy’okwebungulula
.gx-*
kiraasi zisobola okukozesebwa okufuga obugazi bw’emidumu egy’okwebungulula. Omuzadde .container
oba .container-fluid
omuzadde ayinza okwetaaga okutereezebwa singa emidumu eminene nagyo gikozesebwa okwewala okujjula okuteetaagibwa, nga bakozesa ekintu ekikwatagana ne padding utility. Okugeza, mu kyokulabirako kino wammanga twongedde ku padding nga .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>
Eky’okugonjoola ekirala kwe kwongerako ekizingirizi okwetooloola .row
ne .overflow-hidden
kiraasi:
<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>
Emifulejje egy’ennyiriri (vertical gutters).
.gy-*
kiraasi zisobola okukozesebwa okufuga obugazi bw’emidumu egy’ennyiriri (vertical gutter widths). Okufaananako n’emifulejje egy’okwesimbye, emifulejje egy’okwesimbye giyinza okuleeta okukulukuta okumu wansi w’oku .row
nkomerero y’olupapula. Kino bwe kibaawo, oyongerako ekizingirizi okwetoloola .row
ne .overflow-hidden
kiraasi:
<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>
Emifulejje egy’okwebungulula & egy’okwesimbye
.g-*
classes zisobola okukozesebwa okufuga obugazi bwa gutter obw’okwebungulula, olw’ekyokulabirako kino wammanga tukozesa obugazi bwa gutter obutono, kale tewajja kubaawo bwetaavu bwa kwongerako .overflow-hidden
kiraasi ya 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>
Ennyiriri empagi gutters
Gutter classes nazo zisobola okugattibwa ku mpagi z'ennyiriri . Mu kyokulabirako kino wammanga, tukozesa empagi z’ennyiriri eziddamu ne kiraasi za gutter eziddamu.
<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>
Tewali mifulejje
Emifulejje wakati w'empagi mu bibinja byaffe ebya giridi ebyategekebwa edda bisobola okuggyibwawo ne .g-0
. Kino kiggyawo negativu margin
s okuva .row
ne horizontal padding
okuva mu mpagi zonna ez’abaana ab’amangu.
Oyagala dizayini okuva ku mbiriizi okutuuka ku mbiriizi? Suula omuzadde .container
oba .container-fluid
.
Mu nkola, laba engeri gye kirabika. Weetegereze osobola okugenda mu maaso n’okukozesa kino ne kiraasi za grid endala zonna ezitegekeddwa edda (nga mw’otwalidde obugazi bw’ennyiriri, emitendera egy’okuddamu, okuddamu ensengeka, n’ebirala).
<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>
Kyuusa emidumu gy’amazzi
Ebisulo bizimbibwa okuva ku $gutters
maapu ya Sass esikirwa okuva ku $spacers
maapu ya Sass.
$grid-gutter-width: 1.5rem;
$gutters: (
0: 0,
1: $spacer * .25,
2: $spacer * .5,
3: $spacer,
4: $spacer * 1.5,
5: $spacer * 3,
);