Gutters
Gutters binne de padding tusken jo kolommen, brûkt om responsyf romte te meitsjen en ynhâld yn te rjochtsjen yn it Bootstrap-rastersysteem.
Hoe't se wurkje
-
Gutters binne de gatten tusken kolomynhâld, makke troch horizontale
padding
. Wy settepadding-right
enpadding-left
op elke kolom, en brûke negatyfmargin
te kompensearjen dat oan it begjin en ein fan elke rige te align ynhâld. -
Goaten begjinne by
1.5rem
(24px
) breed. Dit lit ús ús raster oerienkomme mei de skaal fan padding en marzje spacers . -
Goaten kinne responsyf oanpast wurde. Brûk breakpoint-spesifike gutterklassen om horizontale goten, fertikale goaten en alle goaten te feroarjen.
Horizontale gevels
.gx-*
klassen kinne brûkt wurde om te kontrolearjen de horizontale gutter widths. De .container
of .container-fluid
âlder kin moatte wurde oanpast as gruttere goten wurde brûkt te foar te kommen net winske oerstreaming, mei help fan in oerienkommende padding nut. Bygelyks, yn it folgjende foarbyld hawwe wy de padding ferhege mei .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>
In alternative oplossing is it tafoegjen fan in wrapper om 'e .row
mei de .overflow-hidden
klasse:
<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>
Fertikale goaten
.gy-*
klassen kinne brûkt wurde om te kontrolearjen de fertikale gutter widths. Lykas de horizontale gutters kinne de fertikale goaten wat oerstreaming feroarsaakje ûnder de .row
oan 'e ein fan in side. As dit bart, foegje jo in wrapper .row
ta mei de .overflow-hidden
klasse:
<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>
Horizontale en fertikale goaten
.g-*
klassen kinne brûkt wurde om te kontrolearjen de horizontale gutter widths, foar it folgjende foarbyld wy brûke in lytsere gutter breedte, dus der sil net nedich te foegjen de .overflow-hidden
wrapper klasse.
<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>
Rige kolommen goten
Gutter-klassen kinne ek wurde tafoege oan rige kolommen . Yn it folgjende foarbyld brûke wy responsive rige kolommen en responsive gutterklassen.
<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>
Gjin geiten
De goten tusken kolommen yn ús foarôf definieare rasterklassen kinne wurde fuortsmiten mei .g-0
. Dit smyt de negative margin
s út .row
en de horizontale padding
út alle direkte bern kolommen.
In edge-to-edge ûntwerp nedich? Drop de âlder .container
of .container-fluid
.
Yn 'e praktyk, hjir is hoe't it derút sjocht. Tink derom dat jo dit kinne trochgean mei alle oare foarôf definieare rasterklassen (ynklusyf kolombreedten, responsive tiers, opnij oarders, en mear).
<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>
Feroarje de goaten
Klassen wurde boud fan de $gutters
Sass-kaart dy't erfd is fan de $spacers
Sass-kaart.
$grid-gutter-width: 1.5rem;
$gutters: (
0: 0,
1: $spacer * .25,
2: $spacer * .5,
3: $spacer,
4: $spacer * 1.5,
5: $spacer * 3,
);