Takrenner
Takrenner er polstringen mellom kolonnene dine, som brukes til responsivt mellomrom og justering av innhold i Bootstrap-rutenettsystemet.
Hvordan de fungerer
-
Takrenner er hullene mellom kolonneinnhold, skapt av horisontal
padding
. Vi setterpadding-right
ogpadding-left
på hver kolonne, og bruker negativmargin
for å forskyve det på starten og slutten av hver rad for å justere innholdet. -
Takrenner starter ved
1.5rem
(24px
) bred. Dette lar oss matche rutenettet vårt til skalaen for polstring og marginavstandsstykker . -
Takrenner kan tilpasses responsivt. Bruk bruddpunktspesifikke takrenneklasser for å modifisere horisontale takrenner, vertikale takrenner og alle takrenner.
Horisontale takrenner
.gx-*
klasser kan brukes til å kontrollere de horisontale rennebreddene. Forelderen .container
eller .container-fluid
forelderen må kanskje justeres hvis større takrenner også brukes for å unngå uønsket overløp, ved å bruke et matchende polstringsverktøy. For eksempel, i følgende eksempel har vi økt polstringen 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 er å legge til en omslag rundt .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>
Vertikale takrenner
.gy-*
klasser kan brukes til å kontrollere de vertikale rennebreddene. I likhet med de horisontale takrennene kan de vertikale takrennene forårsake noe overløp under .row
på slutten av en side. Hvis dette skjer, legger du til et 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>
Horisontale og vertikale takrenner
.g-*
klasser kan brukes til å kontrollere de horisontale rennebreddene, for følgende eksempel bruker vi en mindre rennebredde, så det vil ikke være behov for å legge til .overflow-hidden
innpakningsklassen.
<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>
Radsøyler takrenner
Renneklasser kan også legges til radkolonner . I det følgende eksempelet bruker vi responsive radkolonner og responsive gutter-klasser.
<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>
Ingen takrenner
Rennene mellom søyler i våre forhåndsdefinerte rutenettklasser kan fjernes med .g-0
. Dette fjerner negative margin
s fra .row
og horisontale padding
fra alle umiddelbare underordnede kolonner.
Trenger du et kant-til-kant-design? Slipp forelderen .container
eller .container-fluid
.
I praksis ser det slik ut. Merk at du kan fortsette å bruke dette med alle andre forhåndsdefinerte rutenettklasser (inkludert kolonnebredder, responsive nivåer, ombestillinger og 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>
Skift takrennene
Klassene bygges fra $gutters
Sass-kartet som er arvet fra $spacers
Sass-kartet.
$grid-gutter-width: 1.5rem;
$gutters: (
0: 0,
1: $spacer * .25,
2: $spacer * .5,
3: $spacer,
4: $spacer * 1.5,
5: $spacer * 3,
);