Rennur
Rennur eru fyllingin á milli dálka þinna, notuð til að rýma og samræma efni í Bootstrap ristkerfinu.
Hvernig þeir virka
-
Rennur eru bilin á milli dálkainnihalds, búin til af láréttum
padding
. Við stillumpadding-right
ogpadding-left
á hvern dálk og notum neikvæðmargin
til að vega upp á móti því í upphafi og lok hverrar línu til að samræma innihald. -
Rennur byrja á
1.5rem
(24px
) á breidd. Þetta gerir okkur kleift að passa ristina okkar við mælikvarða bólstrunnar og jaðarbilanna . -
Hægt er að stilla rennur á skynsamlegan hátt. Notaðu brotpunktssértæka þakrennuflokka til að breyta láréttum þakrennum, lóðréttum þakrennum og öllum þakrennum.
Láréttar þakrennur
.gx-*
flokka er hægt að nota til að stjórna láréttum rennubreiddum. Gæti þurft að stilla foreldrið .container
ef .container-fluid
stærri þakrennur eru notaðar líka til að forðast óæskilegt yfirfall, með því að nota samsvarandi bólstrun. Til dæmis, í eftirfarandi dæmi höfum við aukið fyllinguna með .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>
Önnur lausn er að bæta umbúðir utan um .row
með .overflow-hidden
bekknum:
<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>
Lóðréttar þakrennur
.gy-*
flokka er hægt að nota til að stjórna lóðréttum rennubreiddum. Eins og láréttu þakrennurnar geta lóðréttu þakrennurnar valdið yfirfalli fyrir neðan .row
í lok síðu. Ef þetta gerist, bætir þú við umbúðum .row
með .overflow-hidden
bekknum:
<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>
Láréttar og lóðréttar þakrennur
.g-*
flokka er hægt að nota til að stjórna láréttri breidd ræsisins, fyrir eftirfarandi dæmi notum við minni breidd ræsisins, þannig að það þarf ekki að bæta .overflow-hidden
umbúðaflokknum við.
<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>
Röð súlur rennur
Einnig er hægt að bæta rennuflokkum við línudálka . Í eftirfarandi dæmi notum við móttækilega línudálka og móttækilega rennuflokka.
<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>
Engar þakrennur
Hægt er að fjarlægja rennurnar á milli dálka í fyrirfram skilgreindum gridflokkum okkar með .g-0
. Þetta fjarlægir neikvæðu margin
s úr .row
og láréttu padding
úr öllum dálkum fyrir næstu börn.
Þarftu brún til brún hönnun? Slepptu foreldri .container
eða .container-fluid
.
Í reynd, hér er hvernig það lítur út. Athugaðu að þú getur haldið áfram að nota þetta með öllum öðrum fyrirfram skilgreindum töfluflokkum (þar á meðal dálkabreiddum, móttækilegum flokkum, endurpöntunum og fleira).
<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>
Skiptu um þakrennur
Flokkar eru byggðir upp úr $gutters
Sass kortinu sem er erft frá $spacers
Sass kortinu.
$grid-gutter-width: 1.5rem;
$gutters: (
0: 0,
1: $spacer * .25,
2: $spacer * .5,
3: $spacer,
4: $spacer * 1.5,
5: $spacer * 3,
);