Guutaa
Gutters jechuun padding tarjaawwan kee gidduu jiruudha, deebii kennuudhaan qabiyyee sirna tarjaa Bootstrap keessatti iddoo fi qindeessuuf fayyadamu.
Akkaataa itti hojjetan
-
Gutters qaawwa qabiyyee tarjaa gidduu jiruudha, horizontal tiin uumame
padding
. Tokkoon tokkoo tarjaa irrattipadding-right
fi saagna, fi qabiyyee qindeessuuf sana jalqaba fi dhuma tarree tokkoon tokkoo irratti ofseet gochuufpadding-left
negaatiivii fayyadamna .margin
-
Gutters bal'inaan
1.5rem
( ) irraa jalqabu .24px
Kunis giiridii keenya iskeelii padding fi margin spacers wajjin walsimsiisuuf nu dandeessisa. -
Gutters deebii kennuudhaan sirreeffamuu danda'u. Guutaroota qajeeloo, gutter dhaabbataa, fi gutter hunda fooyyessuuf gitaalee gutter qabxii cabbii adda ta'an fayyadami.
Gutters horizontal ta’an
.gx-*
gita bal'ina gutter horizontal to'achuuf fayyadamuun ni danda'ama. .container
Yoo ykn warri .container-fluid
sirreeffamuu barbaachisuu danda'a yoo gutters gurguddoon akkasumas fayyadaman dhangala'aa hin barbaadamne hambisuuf, faayidaa padding walsimsiisu fayyadamuun. Fakkeenyaaf, fakkeenya armaan gadii keessatti padding akka .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>
Furmaanni filannoo biraa marfata naannoo the .row
with the .overflow-hidden
class itti dabaluudha:
<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 dhaabbataa ta’an
.gy-*
gita bal'ina gutter dhaabbataa to'achuuf fayyadamuun ni danda'ama. Akkuma gutters horizontal, gutters verticals .row
dhuma fuula tokkoo gadiitti dhangala'aa tokko tokko fiduu danda'u. Yoo kun uumame, gita .row
waliin marfata naannoo dabalta :.overflow-hidden
<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>
Gutters horizontal & dhaabbataa ta’an
.g-*
gitaalee bal'ina gutter horizontal to'achuuf fayyadamuun ni danda'ama, fakkeenya armaan gadiitiif bal'ina gutter xiqqaa fayyadamna, kanaaf .overflow-hidden
gita marfataa dabaluu hin barbaachisu.
<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>
Tarree tarreewwan gutters
Gitoota gutter akkasumas tarjaa tarree irratti dabalamuu danda'u . Fakkeenya armaan gadii keessatti, tarjaawwan tarree deebii kennanii fi gitaalee gutter deebii kennan fayyadamna.
<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>
Gutters hin qabu
Gutters tarjaawwan gidduu gita tarjaa keenya dursee ibsaman keessatti .g-0
. Kunis tarjaa ijoollee battalaa hunda irraa margin
s negaatiivii .row
fi tarjaawwan horizontaalaa ni haqa.padding
Dizaayinii qarqara irraa gara qarqaraatti barbaadduu? Warra .container
ykn .container-fluid
.
Qabatamaan akkas fakkaata. Hubadhu kana gita tarjaa durtii ibsaman biroo hunda waliin fayyadamuu itti fufuu dandeessa (bal'ina tarjaa, sadarkaa deebii kennuu, irra deebiin tartiiba, fi kkf dabalatee).
<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>
Gutters jijjiiri
Kutaawwan kaartaa Sass irraa kan ijaaraman yoo $gutters
ta'u kunis kaartaa Sass irraa dhaala $spacers
.
$grid-gutter-width: 1.5rem;
$gutters: (
0: 0,
1: $spacer * .25,
2: $spacer * .5,
3: $spacer,
4: $spacer * 1.5,
5: $spacer * 3,
);