Tagrender

Tagrender er polstringen mellem dine kolonner, der bruges til responsivt at placere og justere indhold i Bootstrap-gittersystemet.

På denne side

Hvordan de virker

Tagrender er hullerne mellem kolonneindhold, skabt af vandret padding. Vi indstiller padding-rightog padding-leftpå hver kolonne og bruger negativ margintil at forskyde det i starten og slutningen af hver række for at justere indholdet.
Tagrender starter ved 1.5rem( 24px) bred. Dette giver os mulighed for at matche vores gitter til polstrings- og marginafstandsskalaen .
Tagrender kan tilpasses responsivt. Brug brudpunktsspecifikke tagrender til at ændre vandrette tagrender, vertikale tagrender og alle tagrender.

Vandrette tagrender

.gx-*klasser kan bruges til at styre de vandrette tagrendebredder. Forælderen .containereller .container-fluidforælderen skal muligvis justeres, hvis der også bruges større tagrender for at undgå uønsket overløb, ved hjælp af et matchende polstringsværktøj. For eksempel har vi i det følgende eksempel øget polstringen med .px-4:

Brugerdefineret søjlepolstring

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>

En alternativ løsning er at tilføje en indpakning rundt om .rowmed .overflow-hiddenklassen:

Brugerdefineret søjlepolstring

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>

Lodrette tagrender

.gy-*klasser kan bruges til at styre de lodrette rendebredder inden for en række, når kolonner ombrydes til nye linjer. Ligesom de vandrette tagrender, kan de lodrette tagrender forårsage en vis overløb under .rowi slutningen af en side. Hvis dette sker, tilføjer du en indpakning .rowmed .overflow-hiddenklassen:

Brugerdefineret søjlepolstring

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>

Vandrette og lodrette tagrender

.g-*klasser kan bruges til at styre de vandrette tagrendebredder, i det følgende eksempel bruger vi en mindre tagrendebredde, så der vil ikke være behov for at tilføje .overflow-hiddenindpakningsklassen.

Brugerdefineret søjlepolstring

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ækkesøjler tagrender

Rammeklasser kan også tilføjes til rækkekolonner . I det følgende eksempel bruger vi responsive rækkekolonner og responsive gutter-klasser.

Række kolonne

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>

Ingen tagrender

Tagrenderne mellem søjler i vores foruddefinerede gitterklasser kan fjernes med .g-0. Dette fjerner de negative margins fra .rowog de vandrette paddingfra alle umiddelbare underordnede kolonner.

Har du brug for et kant-til-kant-design? Drop forælderen .containereller .container-fluidog føj .mx-0til for .rowat forhindre overløb.

I praksis ser det sådan ud. Bemærk, at du kan fortsætte med at bruge dette med alle andre foruddefinerede gitterklasser (inklusive kolonnebredder, responsive niveauer, genbestillinger og mere).

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

Skift tagrenderne

Klasser er bygget fra $guttersSass-kortet, som er arvet fra $spacersSass-kortet.

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