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.

Op deze pagina

Hoe ze werken

Dakgoten zijn de openingen tussen kolominhoud, gecreëerd door horizontale padding. We zetten padding-righten padding-leftop elke kolom en gebruiken negatief marginom 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 .containerof .container-fluidouder 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:

Aangepaste kolomvulling

html

<div class="container px-4 text-center">
  <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 .rowmet de .overflow-hiddenklasse:

Aangepaste kolomvulling

html

<div class="container overflow-hidden text-center">
  <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 binnen een rij te regelen wanneer kolommen zich naar nieuwe regels overlopen. Net als de horizontale goten, kunnen de verticale goten wat overloop veroorzaken onder .rowaan het einde van een pagina. Als dit gebeurt, voeg je een wrapper toe .rowmet de .overflow-hiddenklasse:

Aangepaste kolomvulling

html

<div class="container overflow-hidden text-center">
  <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-hiddenwrapperklasse toe te voegen.

Aangepaste kolomvulling

html

<div class="container text-center">
  <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.

Rij kolom

html

<div class="container text-center">
  <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 margins van .rowen de horizontale paddingvan alle directe onderliggende kolommen.

Een edge-to-edge ontwerp nodig? Laat de bovenliggende .containerof vallen .container-fluiden voeg toe .mx-0aan de .rowom overloop te voorkomen.

In de praktijk ziet het er zo uit. Merk op dat u dit kunt blijven gebruiken met alle andere vooraf gedefinieerde rasterklassen (inclusief kolombreedten, responsieve lagen, herschikkingen en meer).

.col-sm-6 .col-md-8

.col-6 .col-md-4

html

<div class="row g-0 text-center">
  <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 $guttersSass-kaart die is overgenomen van de $spacersSass-kaart.

$grid-gutter-width: 1.5rem;
$gutters: (
  0: 0,
  1: $spacer * .25,
  2: $spacer * .5,
  3: $spacer,
  4: $spacer * 1.5,
  5: $spacer * 3,
);