Dachrinnen

Bundstege sind die Polsterung zwischen Ihren Spalten, die verwendet werden, um Inhalte im Bootstrap-Rastersystem reaktionsschnell zu platzieren und auszurichten.

Auf dieser Seite

Wie sie arbeiten

Bundstege sind die Lücken zwischen Spalteninhalten, die durch horizontal erstellt werden padding. Wir setzen padding-rightund padding-leftin jeder Spalte und verwenden negativ margin, um dies am Anfang und Ende jeder Zeile auszugleichen, um den Inhalt auszurichten.
Dachrinnen beginnen bei 1.5rem( 24px) breit. Dadurch können wir unser Raster an die Skala der Polsterung und der Randabstandshalter anpassen .
Dachrinnen können reaktionsschnell eingestellt werden. Verwenden Sie haltepunktspezifische Rinnenklassen, um horizontale Rinnen, vertikale Rinnen und alle Rinnen zu ändern.

Horizontale Dachrinnen

.gx-*Klassen können verwendet werden, um die horizontalen Stegbreiten zu steuern. Die .containeroder .container-fluidEltern müssen möglicherweise angepasst werden, wenn auch größere Dachrinnen verwendet werden, um ein unerwünschtes Überlaufen zu vermeiden, indem ein passendes Polsterungsprogramm verwendet wird. Im folgenden Beispiel haben wir beispielsweise die Polsterung mit erhöht .px-4:

Benutzerdefinierte Spaltenfüllung

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

.rowEine alternative Lösung besteht darin, einen Wrapper um die mit der .overflow-hiddenKlasse hinzuzufügen :

Benutzerdefinierte Spaltenfüllung

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

.gy-*Klassen können verwendet werden, um die vertikalen Dachrinnenbreiten zu steuern. Wie die horizontalen Bundstege können die vertikalen Bundstege einen gewissen Überlauf unter .rowdem Ende einer Seite verursachen. In diesem Fall fügen Sie .rowder .overflow-hiddenKlasse einen Wrapper hinzu:

Benutzerdefinierte Spaltenfüllung

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

Horizontale und vertikale Dachrinnen

.g-*-Klassen können verwendet werden, um die horizontalen Stegbreiten zu steuern. Für das folgende Beispiel verwenden wir eine kleinere Stegbreite, sodass die .overflow-hiddenWrapper-Klasse nicht hinzugefügt werden muss.

Benutzerdefinierte Spaltenfüllung

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

Zeilenspalten Dachrinnen

Dachrinnenklassen können auch Zeilenspalten hinzugefügt werden . Im folgenden Beispiel verwenden wir reaktionsfähige Zeilenspalten und reaktionsfähige Dachrinnenklassen.

Zeile Spalte

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

Keine Dachrinnen

Die Stege zwischen den Spalten in unseren vordefinierten Rasterklassen können mit entfernt werden .g-0. Dadurch wird das negative margins aus .rowund die Horizontale paddingaus allen unmittelbar untergeordneten Spalten entfernt.

Benötigen Sie ein Edge-to-Edge-Design? Löschen Sie das übergeordnete Element .containeroder .container-fluid.

In der Praxis sieht es so aus. Beachten Sie, dass Sie dies weiterhin mit allen anderen vordefinierten Rasterklassen verwenden können (einschließlich Spaltenbreiten, Reaktionsebenen, Neuordnungen und mehr).

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

Ändern Sie die Dachrinnen

Klassen werden aus der $guttersSass-Map erstellt, die von der Sass-Map geerbt $spacerswird.

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