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

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

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

Sérsniðin dálkfylling

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

Lóðréttar þakrennur

.gy-*flokka er hægt að nota til að stjórna lóðréttum rennubreiddum. 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

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

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

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

Sérsniðin dálkfylling

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

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

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

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

Í 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

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

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