Rännor
Rännor är stoppningen mellan dina kolumner, som används för att på ett responsivt sätt rymma och anpassa innehåll i Bootstrap-rutnätssystemet.
Hur de fungerar
-
Rännor är luckorna mellan kolumninnehåll, skapade av horisontella
padding
. Vi ställer inpadding-right
ochpadding-left
på varje kolumn och använder negativmargin
för att kompensera det i början och slutet av varje rad för att anpassa innehållet. -
Rännor börjar vid
1.5rem
(24px
) breda. Detta gör att vi kan matcha vårt rutnät till skalan för stoppning och marginaldistanser . -
Rännor kan anpassas responsivt. Använd brytpunktsspecifika rännstensklasser för att modifiera horisontella rännor, vertikala rännor och alla rännor.
Horisontella hängrännor
.gx-*
klasser kan användas för att styra de horisontella rännans bredder. Föräldern .container
eller .container-fluid
föräldern kan behöva justeras om större rännor också används för att undvika oönskat översvämning, med hjälp av ett matchande stoppningsverktyg. Till exempel, i följande exempel har vi ökat utfyllnaden med .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>
En alternativ lösning är att lägga till ett omslag runt .row
med .overflow-hidden
klassen:
<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>
Vertikala hängrännor
.gy-*
klasser kan användas för att styra de vertikala rännans bredder. Liksom de horisontella rännorna kan de vertikala rännorna orsaka visst överflöde under .row
slutet av en sida. Om detta inträffar lägger du till ett omslag .row
med .overflow-hidden
klassen:
<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>
Horisontella och vertikala hängrännor
.g-*
klasser kan användas för att styra de horisontella rännans bredder, i följande exempel använder vi en mindre rännvidd, så det kommer inte att finnas ett behov av att lägga till .overflow-hidden
omslagsklassen.
<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>
Rad kolumner rännor
Gränsklasser kan också läggas till i radkolumner . I följande exempel använder vi responsiva radkolumner och responsiva rännstensklasser.
<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>
Inga hängrännor
Rännorna mellan kolumner i våra fördefinierade rutnätsklasser kan tas bort med .g-0
. Detta tar bort negativa margin
s från .row
och horisontella padding
från alla omedelbara underordnade kolumner.
Behöver du en kant-till-kant-design? Släpp föräldern .container
eller .container-fluid
.
I praktiken ser det ut så här. Observera att du kan fortsätta att använda detta med alla andra fördefinierade rutnätsklasser (inklusive kolumnbredder, responsiva nivåer, ombeställningar och mer).
<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>
Byt rännorna
Klasser är byggda från $gutters
Sass-kartan som ärvs från $spacers
Sass-kartan.
$grid-gutter-width: 1.5rem;
$gutters: (
0: 0,
1: $spacer * .25,
2: $spacer * .5,
3: $spacer,
4: $spacer * 1.5,
5: $spacer * 3,
);