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.
Hoe hulle werk
-
Geute is die gapings tussen kolominhoud, geskep deur horisontale
padding
. Ons stelpadding-right
enpadding-left
op elke kolom, en gebruik negatiefmargin
om 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 .container
of .container-fluid
ouer 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
:
<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 .row
by die .overflow-hidden
klas by te voeg:
<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 .row
aan die einde van 'n bladsy veroorsaak. As dit gebeur, voeg jy 'n omhulsel saam .row
met die .overflow-hidden
klas by:
<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-hidden
omhulklas by te voeg nie.
<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.
<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 margin
s van .row
en die horisontale padding
van alle onmiddellike kinders kolomme.
Het jy 'n rand-tot-rand-ontwerp nodig? Los die ouer .container
of .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).
<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 $gutters
Sass-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,
);