Gutters
Gutters waa suufka u dhexeeya tiirarkaaga, oo loo isticmaalo in si taxaddar leh meel bannaan loo dhigo oo loo waafajiyo waxa ku jira nidaamka xadhkaha Bootstrap.
Sida ay u shaqeeyaan
-
Gutters waa farqiga u dhexeeya nuxurka tiirka, oo ay abuurtay jiif
padding
. Waxaan dhignaypadding-right
oopadding-left
dul saarnaa tiir kasta, waxaana isticmaalnaa tabanmargin
si aan u dhigno bilowga iyo dhammaadka saf kasta si aan u waafajino nuxurka. -
Gutters waxay ka bilaabmaan
1.5rem
(24px
) ballaaran. Tani waxay noo ogolaanaysaa inaan ku dhigno shabaqyadayada suufka iyo cabbirka meelaha bannaan. -
Gutters si taxadar leh ayaa loo hagaajin karaa. Isticmaal fasalada maroodiga u gaarka ah si aad wax uga beddesho maroojisyada jiifka ah, maroojisyada toosan, iyo dhammaan marinnada biyaha.
Biyo mareenada toosan
.gx-*
fasalada waxaa loo isticmaali karaa in lagu xakameeyo ballaadhka maroodiga jiifka ah. Waalidka .container
ama .container-fluid
waalidka ayaa laga yaabaa in ay u baahdaan in la hagaajiyo haddii sidoo kale la isticmaalo mareenada waaweyn si looga fogaado qulqulka aan la rabin, iyada oo la isticmaalayo qalab suuf ah oo ku habboon. Tusaale ahaan, tusaalaha soo socda waxa aanu ku kordhinay suufka .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>
Xalka beddelka ah waa in lagu daro duubka agagaarka .row
fasalka .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>
Godad toosan
.gy-*
fasallada waxaa loo isticmaali karaa in lagu xakameeyo ballaadhka maroodiga toosan. Sida mareenada jiifka ah, majaraha toosan waxay sababi karaan qulqulka qaar ka hooseeya .row
dhamaadka bogga. Hadday tani dhacdo, waxaad fasalka .row
ku dartay duub:.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>
Godad toosan & toosan
.g-*
fasalada waxaa loo isticmaali karaa in lagu xakameeyo ballaadhka maroodiga jiifka ah, tusaale ahaan tusaalahan soo socda waxaan isticmaalnaa ballac yar oo maroojis ah, markaa ma jiri doonto baahi loo qabo in lagu daro .overflow-hidden
fasalka duubista.
<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>
Jidadka safka ah
Fasallada jeexjeexyada sidoo kale waxaa lagu dari karaa tiirarka safka . Tusaalahan soo socda, waxaanu isticmaalnaa tiirar saf ah oo jawaab celin ah iyo fasallo maroojis ah oo ka jawaabaya.
<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>
Biyo mareen
Godadka u dhexeeya tiirarka ee fasaladayada jaranjarada ee horay loo sii qeexay waxa lagu saari karaa .g-0
. Tani waxay meesha ka saaraysaa xumaanta margin
iyo .row
jiifka padding
dhammaan tiirarka carruurta ee dhow.
Ma u baahan tahay naqshad gees ilaa gees ah? Tuur waalidka .container
ama .container-fluid
.
Ficil ahaan, halkan waa sida ay u egtahay. Ogsoonow inaad ku sii wadan karto isticmaalka kan dhammaan fasalada kale ee saad u qeexan (ay ku jiraan ballaadhka tiirka, heerarka jawaabta, dib u dalbashada, iyo in ka badan).
<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>
Beddel majaraha
Fasallada waxaa laga dhisay $gutters
khariidadda Sass ee laga dhaxlo $spacers
khariidadda Sass.
$grid-gutter-width: 1.5rem;
$gutters: (
0: 0,
1: $spacer * .25,
2: $spacer * .5,
3: $spacer,
4: $spacer * 1.5,
5: $spacer * 3,
);