dakgoten
Dakgoten zijn de opvulling tussen uw kolommen, die worden gebruikt om op een responsieve manier inhoud in het Bootstrap-rastersysteem te plaatsen en uit te lijnen.
Hoe ze werken
-
Dakgoten zijn de openingen tussen kolominhoud, gecreëerd door horizontale
padding
. We zettenpadding-right
enpadding-left
op elke kolom en gebruiken negatiefmargin
om dat aan het begin en einde van elke rij te compenseren om de inhoud uit te lijnen. -
Dakgoten beginnen bij
1.5rem
(24px
) breed. Hierdoor kunnen we ons raster afstemmen op de schaal van de opvulling en de margeafstandhouders . -
Dakgoten kunnen reactief worden aangepast. Gebruik breekpuntspecifieke dakgootklassen om horizontale goten, verticale goten en alle goten aan te passen.
Horizontale goten
.gx-*
klassen kunnen worden gebruikt om de horizontale gootbreedtes te regelen. De .container
of .container-fluid
ouder moet mogelijk worden aangepast als ook grotere goten worden gebruikt om ongewenste overloop te voorkomen, met behulp van een bijpassend opvulhulpprogramma. In het volgende voorbeeld hebben we bijvoorbeeld de opvulling verhoogd met .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>
Een alternatieve oplossing is om een wrapper toe te voegen rond de .row
met 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>
Verticale goten
.gy-*
klassen kunnen worden gebruikt om de verticale gootbreedtes te regelen. Net als de horizontale goten, kunnen de verticale goten onder .row
aan het einde van een pagina enige overloop veroorzaken. Als dit gebeurt, voeg je een wrapper toe .row
met 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 & verticale goten
.g-*
klassen kunnen worden gebruikt om de horizontale gootbreedten te regelen, voor het volgende voorbeeld gebruiken we een kleinere gootbreedte, dus het is niet nodig om de .overflow-hidden
wrapperklasse toe te voegen.
<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>
Rij kolommen goten
Gutterklassen kunnen ook aan rijkolommen worden toegevoegd . In het volgende voorbeeld gebruiken we responsieve rijkolommen en responsieve gootklassen.
<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>
Geen goten
De goten tussen kolommen in onze vooraf gedefinieerde rasterklassen kunnen worden verwijderd met .g-0
. Dit verwijdert de negatieve margin
s van .row
en de horizontale padding
van alle directe onderliggende kolommen.
Een edge-to-edge ontwerp nodig? Laat de ouder vallen .container
of .container-fluid
.
In de praktijk ziet het er zo uit. Houd er rekening mee dat u dit kunt blijven gebruiken met alle andere vooraf gedefinieerde rasterklassen (inclusief kolombreedten, responsieve lagen, herschikkingen en meer).
<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>
Verander de dakgoten
Klassen zijn opgebouwd uit de $gutters
Sass-kaart die is overgenomen van 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,
);