Geute

Geute is die vulsel tussen jou kolomme, wat gebruik word om inhoud in die Bootstrap-roosterstelsel responsief te spasieer en in lyn te bring.

Op hierdie bladsy

Hoe hulle werk

Geute is die gapings tussen kolominhoud, geskep deur horisontale padding. Ons stel padding-righten padding-leftop elke kolom, en gebruik negatief marginom dit aan die begin en einde van elke ry te verreken om inhoud in lyn te bring.
Geute begin by 1.5rem( 24px) wyd. Dit stel ons in staat om ons rooster te pas by die vulling en margespasiëringsskaal .
Geute kan responsief aangepas word. Gebruik breekpunt-spesifieke geute om horisontale geute, vertikale geute en alle geute te verander.

Horisontale geute

.gx-*klasse kan gebruik word om die horisontale geutwydtes te beheer. Die .containerof .container-fluidouer sal dalk aangepas moet word as groter geute ook gebruik word om ongewenste oorloop te vermy, met behulp van 'n bypassende opvullingshulpmiddel. Byvoorbeeld, in die volgende voorbeeld het ons die vulling verhoog met .px-4:

Pasgemaakte kolomvulling

<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>

'n Alternatiewe oplossing is om 'n omhulsel .rowby die .overflow-hiddenklas by te voeg:

Pasgemaakte kolomvulling

<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>

Vertikale geute

.gy-*klasse kan gebruik word om die vertikale geutwydtes te beheer. Soos die horisontale geute, kan die vertikale geute 'n mate van oorloop onder die .rowaan die einde van 'n bladsy veroorsaak. As dit gebeur, voeg jy 'n omhulsel saam .rowmet die .overflow-hiddenklas by:

Pasgemaakte kolomvulling

<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>

Horisontale en vertikale geute

.g-*klasse kan gebruik word om die horisontale geutwydtes te beheer, vir die volgende voorbeeld gebruik ons 'n kleiner geutwydte, so dit sal nie nodig wees om die .overflow-hiddenomhulklas by te voeg nie.

Pasgemaakte kolomvulling

<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>

Ry kolomme geute

Gootklasse kan ook by rykolomme gevoeg word . In die volgende voorbeeld gebruik ons responsiewe rykolomme en responsiewe geutklasse.

Ry kolom

<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 geute nie

Die geute tussen kolomme in ons vooraf gedefinieerde roosterklasse kan verwyder word met .g-0. Dit verwyder die negatiewe margins van .rowen die horisontale paddingvan alle onmiddellike kinders kolomme.

Het jy 'n rand-tot-rand-ontwerp nodig? Los die ouer .containerof .container-fluid.

In die praktyk, hier is hoe dit lyk. Let daarop dat jy kan voortgaan om dit te gebruik met alle ander voorafbepaalde roosterklasse (insluitend kolomwydtes, responsiewe vlakke, herbestellings en meer).

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

.kol-6 .kol-md-4

<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 die geute

Klasse word gebou vanaf die $guttersSass-kaart wat van die Sass-kaart geërf word $spacers.

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