Vesikourut

Kourut ovat sarakkeiden välissä oleva pehmuste, jota käytetään Bootstrap-ruudukkojärjestelmän sisällön responsiiviseen tilaamiseen ja kohdistamiseen.

Tällä sivulla

Miten ne toimivat

Kourut ovat sarakkeen sisällön välisiä aukkoja, jotka on luotu vaakasuuntaisella padding. Asetamme padding-rightja padding-leftjokaiseen sarakkeeseen, ja käytämme negatiivista marginkorvataksemme 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-fluidtoivotun ylivuodon estämiseksi, on ehkä säädettävä sopivalla pehmusteella. Esimerkiksi seuraavassa esimerkissä olemme lisänneet täyttöä .px-4:

Mukautettu sarakkeen täyte

html

<div class="container px-4 text-center">
  <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 .rowympärille .overflow-hidden:

Mukautettu sarakkeen täyte

html

<div class="container overflow-hidden text-center">
  <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ää pystysuuntaisten kourujen leveyksien ohjaamiseen rivin sisällä, kun sarakkeet kietoutuvat uusiin riveihin. Kuten vaakakourut, pystysuorat kourut voivat aiheuttaa ylivuotoa .rowsivun lopussa olevan merkin alla. Jos näin käy, lisää kääre luokan .rowympärille .overflow-hidden:

Mukautettu sarakkeen täyte

html

<div class="container overflow-hidden text-center">
  <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.

Mukautettu sarakkeen täyte

html

<div class="container text-center">
  <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.

Rivi sarake

html

<div class="container text-center">
  <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 margins:t kaikista välittömistä alatason sarakkeista .rowja vaakasuuntaiset .padding

Tarvitsetko reunasta reunaan -suunnittelua? Pudota vanhempi .containertai .container-fluidja lisää .mx-0se .rowylivuodon estämiseksi.

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).

.col-sm-6 .col-md-8

.col-6 .col-md-4

html

<div class="row g-0 text-center">
  <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 $guttersSass-kartalta, joka on peritty $spacersSass-kartalta.

$grid-gutter-width: 1.5rem;
$gutters: (
  0: 0,
  1: $spacer * .25,
  2: $spacer * .5,
  3: $spacer,
  4: $spacer * 1.5,
  5: $spacer * 3,
);