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

<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 .rowympärille .overflow-hidden:

Mukautettu sarakkeen täyte

<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 .rowsivun lopussa olevan merkin alla. Jos näin käy, lisää kääre luokan .rowympärille .overflow-hidden:

Mukautettu sarakkeen täyte

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

Mukautettu sarakkeen täyte

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

Rivi sarake

<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 margins:t kaikista välittömistä alatason sarakkeista .rowja vaakasuuntaiset .padding

Tarvitsetko reunasta reunaan -suunnittelua? Pudota vanhempi .containertai .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).

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

.col-6 .col-md-4

<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 $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,
);