Rennur

Rennur eru fyllingin á milli dálka þinna, notuð til að rýma og samræma efni í Bootstrap ristkerfinu.

Á þessari síðu

Hvernig þeir virka

Rennur eru bilin á milli dálkainnihalds, búin til af láréttum padding. Við stillum padding-rightog padding-leftá hvern dálk og notum neikvæð margintil að vega upp á móti því í upphafi og lok hverrar línu til að samræma innihald.
Rennur byrja á 1.5rem( 24px) á breidd. Þetta gerir okkur kleift að passa ristina okkar við mælikvarða bólstrunnar og jaðarbilanna .
Hægt er að stilla rennur á skynsamlegan hátt. Notaðu brotpunktssértæka þakrennuflokka til að breyta láréttum þakrennum, lóðréttum þakrennum og öllum þakrennum.

Láréttar þakrennur

.gx-*flokka er hægt að nota til að stjórna láréttum rennubreiddum. Gæti þurft að stilla foreldrið .containeref .container-fluidstærri þakrennur eru notaðar líka til að forðast óæskilegt yfirfall, með því að nota samsvarandi bólstrun. Til dæmis, í eftirfarandi dæmi höfum við aukið fyllinguna með .px-4:

Sérsniðin dálkfylling

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>

Önnur lausn er að bæta umbúðir utan um .rowmeð .overflow-hiddenbekknum:

Sérsniðin dálkfylling

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>

Lóðréttar þakrennur

.gy-*Hægt er að nota flokka til að stjórna lóðréttri breidd renna innan röð þegar dálkar sveiflast í nýjar línur. Eins og láréttu þakrennurnar geta lóðréttu þakrennurnar valdið yfirfalli fyrir neðan .rowí lok síðu. Ef þetta gerist, bætir þú við umbúðum .rowmeð .overflow-hiddenbekknum:

Sérsniðin dálkfylling

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>

Láréttar og lóðréttar þakrennur

.g-*flokka er hægt að nota til að stjórna láréttri breidd renna, fyrir eftirfarandi dæmi notum við minni breidd þakrennu, þannig að það þarf ekki að bæta við .overflow-hiddenumbúðaflokknum.

Sérsniðin dálkfylling

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>

Röð súlur rennur

Einnig er hægt að bæta rennuflokkum við línudálka . Í eftirfarandi dæmi notum við móttækilega línudálka og móttækilega rennuflokka.

Röð dálkur

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>

Engar þakrennur

Hægt er að fjarlægja rennurnar á milli dálka í fyrirfram skilgreindum gridflokkum okkar með .g-0. Þetta fjarlægir neikvæðu margins úr .rowog láréttu paddingúr öllum dálkum fyrir næstu börn.

Þarftu brún til brún hönnun? Slepptu foreldri .containereða .container-fluidog bættu .mx-0við til .rowað koma í veg fyrir yfirfall.

Í reynd, hér er hvernig það lítur út. Athugaðu að þú getur haldið áfram að nota þetta með öllum öðrum fyrirfram skilgreindum töfluflokkum (þar á meðal dálkabreiddum, móttækilegum flokkum, endurpöntunum og fleira).

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

Skiptu um þakrennur

Flokkar eru byggðir upp úr $guttersSass kortinu sem er erft frá $spacersSass kortinu.

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