in English

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

<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 at tilføje en indpakning rundt om .rowmed .overflow-hiddenklassen:

Brugerdefineret søjlepolstring

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

Lodrette tagrender

.gy-*klasser kan bruges til at styre de lodrette tagrendebredder. 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

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

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

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

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

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

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

Klasser er bygget ud 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,
);