Takrenner

Takrenner er polstringen mellom kolonnene dine, som brukes til responsivt mellomrom og justering av innhold i Bootstrap-rutenettsystemet.

På denne siden

Hvordan de fungerer

Takrenner er hullene mellom kolonneinnhold, skapt av horisontal padding. Vi setter padding-rightog padding-leftpå hver kolonne, og bruker negativ marginfor å forskyve det på starten og slutten av hver rad for å justere innholdet.
Takrenner starter ved 1.5rem( 24px) bred. Dette lar oss matche rutenettet vårt til skalaen for polstring og marginavstandsstykker .
Takrenner kan tilpasses responsivt. Bruk bruddpunktspesifikke takrenneklasser for å modifisere horisontale takrenner, vertikale takrenner og alle takrenner.

Horisontale takrenner

.gx-*klasser kan brukes til å kontrollere de horisontale rennebreddene. Forelderen .containereller .container-fluidforelderen må kanskje justeres hvis større takrenner også brukes for å unngå uønsket overløp, ved å bruke et matchende polstringsverktøy. For eksempel, i følgende eksempel har vi økt polstringen med .px-4:

Egendefinert søylepolstring

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

En alternativ løsning er å legge til en omslag rundt .rowmed .overflow-hiddenklassen:

Egendefinert søylepolstring

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

Vertikale takrenner

.gy-*klasser kan brukes til å kontrollere de vertikale rennebreddene. I likhet med de horisontale takrennene kan de vertikale takrennene forårsake noe overløp under .rowpå slutten av en side. Hvis dette skjer, legger du til et omslag .rowmed .overflow-hiddenklassen:

Egendefinert søylepolstring

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

Horisontale og vertikale takrenner

.g-*klasser kan brukes til å kontrollere de horisontale rennebreddene, for følgende eksempel bruker vi en mindre rennebredde, så det vil ikke være behov for å legge til .overflow-hiddeninnpakningsklassen.

Egendefinert søylepolstring

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

Radsøyler takrenner

Renneklasser kan også legges til radkolonner . I det følgende eksempelet bruker vi responsive radkolonner og responsive gutter-klasser.

Rad kolonne

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

Ingen takrenner

Rennene mellom søyler i våre forhåndsdefinerte rutenettklasser kan fjernes med .g-0. Dette fjerner negative margins fra .rowog horisontale paddingfra alle umiddelbare underordnede kolonner.

Trenger du et kant-til-kant-design? Slipp forelderen .containereller .container-fluid.

I praksis ser det slik ut. Merk at du kan fortsette å bruke dette med alle andre forhåndsdefinerte rutenettklasser (inkludert kolonnebredder, responsive nivåer, ombestillinger og mer).

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

Skift takrennene

Klassene bygges fra $guttersSass-kartet som er arvet fra $spacersSass-kartet.

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