Gutters

Gutters sinn d'Padding tëscht Äre Sailen, benotzt fir reaktiounsfäeger Plaz an Inhalt am Bootstrap Gitter System ze alignéieren.

Op dëser Säit

Wéi si schaffen

Gutters sinn d'Lücken tëscht Kolonninhalt, erstallt duerch horizontal padding. Mir setzen padding-rightan padding-leftop all Kolonn, a benotzen negativ marginfir dat am Ufank an Enn vun all Zeil ze kompenséieren fir Inhalt ze alignéieren.
Gutters fänken un 1.5rem( 24px) breet. Dëst erlaabt eis eist Gitter mat der Padding a Margin Spacer Skala ze passen.
Gutters kënnen reaktiounsfäeger ugepasst ginn. Benotzt breakpoint-spezifesch Rennen Klassen fir horizontal Rennen, vertikal Rennen an all Rennen z'änneren.

Horizontal Rennen

.gx-*Klassen kënne benotzt ginn fir d'horizontal gutter Breet ze kontrolléieren. Den .containeroder .container-fluidElterendeel muss ugepasst ginn wann och méi grouss Rennen benotzt ginn fir ongewollte Iwwerschwemmungen ze vermeiden, mat engem passenden Padding-Utility. Zum Beispill, am folgende Beispill hu mir d'Padding erhéicht mat .px-4:

Benotzerdefinéiert Kolonn padding

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

Eng alternativ Léisung ass e Wrapper ronderëm de .rowmat der .overflow-hiddenKlass ze addéieren:

Benotzerdefinéiert Kolonn padding

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

Vertikal Rennen

.gy-*Klassen kënne benotzt ginn fir d'vertikal Rennenbreet ze kontrolléieren. Wéi déi horizontal Rennen, kënnen déi vertikale Rennen e puer Iwwerschwemmungen ënner .rowdem Enn vun enger Säit verursaachen. Wann dëst geschitt, füügt Dir e Wrapper ronderëm .rowmat der .overflow-hiddenKlass:

Benotzerdefinéiert Kolonn padding

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

Horizontal a vertikal Rennen

.g-*Klassen kënne benotzt ginn fir d'horizontale Rennbreeden ze kontrolléieren, fir dat folgend Beispill benotze mir eng méi kleng Rennbreet, sou datt et net néideg ass d' .overflow-hiddenWrapperklass ze addéieren.

Benotzerdefinéiert Kolonn padding

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

Rei Sailen Rennen

Gutter Klassen kënnen och an Zeilenkolonnen bäigefüügt ginn . Am folgende Beispill benotze mir reaktiounsfäeger Zeilekolonnen a reaktiounsfäeger Gutterklassen.

Rei Kolonn

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

Keng Rennen

D'Rennen tëscht de Sailen an eise virdefinéierte Gitterklassen kënne mat ewechgeholl ginn .g-0. Dëst läscht déi negativ margins aus .rowan der horizontal paddingaus all direkt Kanner Kolonnen.

Braucht Dir e Rand-zu-Rand Design? Drop den Elterendeel .containeroder .container-fluid.

An der Praxis, hei ass wéi et ausgesäit. Notéiert Dir kënnt weider dëst mat all anere virdefinéierte Gitterklassen benotzen (inklusiv Kolonnbreeten, reaktiounsfäeger Niveauen, Neibestellungen a méi).

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

Änneren d'Rennen

Klassen sinn aus der $guttersSass Kaart gebaut déi vun der Sass Kaart ierflecher ass $spacers.

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