Vesikourut
Kourut ovat sarakkeiden välissä oleva pehmuste, jota käytetään Bootstrap-ruudukkojärjestelmän sisällön responsiiviseen tilaamiseen ja kohdistamiseen.
Miten ne toimivat
-
Kourut ovat sarakkeen sisällön välisiä aukkoja, jotka on luotu vaakasuuntaisella
padding
. Asetammepadding-right
japadding-left
jokaiseen sarakkeeseen, ja käytämme negatiivistamargin
korvataksemme sen jokaisen rivin alussa ja lopussa sisällön tasaamiseksi. -
Vesikourut alkavat
1.5rem
(24px
) leveydestä. Näin voimme sovittaa ruudukkomme täyte- ja marginaalivälikkeiden mittakaavaan. -
Vesikourut voidaan säätää herkästi. Käytä murtopistekohtaisia kouruluokkia vaakakourujen, pystykourujen ja kaikkien kourujen muokkaamiseen.
Vaakakourut
.gx-*
luokilla voidaan ohjata kourujen vaakasuuntaisia leveyksiä. Jos käytetään isompia vesikouruja ei .container
- .container-fluid
toivotun ylivuodon estämiseksi, on ehkä säädettävä sopivalla pehmusteella. Esimerkiksi seuraavassa esimerkissä olemme lisänneet täyttöä .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>
Vaihtoehtoinen ratkaisu on lisätä kääre luokan .row
ympärille .overflow-hidden
:
<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>
Pystykourut
.gy-*
luokkia voidaan käyttää pystysuorien kourujen leveyksien ohjaamiseen. Kuten vaakakourut, pystysuorat kourut voivat aiheuttaa ylivuotoa .row
sivun lopussa olevan merkin alla. Jos näin käy, lisää kääre luokan .row
ympärille .overflow-hidden
:
<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>
Vaaka- ja pystykourut
.g-*
luokilla voidaan ohjata vaakakourujen leveyksiä, seuraavassa esimerkissä käytämme pienempää kouruleveyttä, joten kääreluokkaa ei tarvitse lisätä .overflow-hidden
.
<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>
Rivi sarakkeet vesikourut
Kouruluokkia voidaan lisätä myös rivisarakkeisiin . Seuraavassa esimerkissä käytämme reagoivia rivisarakkeita ja responsiivisia kouruluokkia.
<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>
Ei vesikouruja
Ennalta määritettyjen ruudukkoluokkien sarakkeiden väliset kourut voidaan poistaa .g-0
. Tämä poistaa negatiiviset margin
s:t kaikista välittömistä alatason sarakkeista .row
ja vaakasuuntaiset .padding
Tarvitsetko reunasta reunaan -suunnittelua? Pudota vanhempi .container
tai .container-fluid
.
Käytännössä se näyttää tältä. Huomaa, että voit jatkaa tämän käyttöä kaikkien muiden ennalta määritettyjen ruudukkoluokkien kanssa (mukaan lukien sarakkeiden leveydet, reagoivat tasot, uudelleenjärjestelyt ja muut).
<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>
Vaihda vesikourut
Luokat on rakennettu $gutters
Sass-kartalta, joka on peritty $spacers
Sass-kartalta.
$grid-gutter-width: 1.5rem;
$gutters: (
0: 0,
1: $spacer * .25,
2: $spacer * .5,
3: $spacer,
4: $spacer * 1.5,
5: $spacer * 3,
);