Dachrinnen
Bundstege sind die Polsterung zwischen Ihren Spalten, die verwendet werden, um Inhalte im Bootstrap-Rastersystem reaktionsschnell zu platzieren und auszurichten.
Wie sie arbeiten
-
Bundstege sind die Lücken zwischen Spalteninhalten, die durch horizontal erstellt werden
padding
. Wir setzenpadding-right
undpadding-left
in jeder Spalte und verwenden negativmargin
, 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 .container
oder .container-fluid
Eltern 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
:
<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>
.row
Eine alternative Lösung besteht darin, einen Wrapper um die mit der .overflow-hidden
Klasse hinzuzufügen :
<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 .row
dem Ende einer Seite verursachen. In diesem Fall fügen Sie .row
der .overflow-hidden
Klasse einen Wrapper hinzu:
<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-hidden
Wrapper-Klasse nicht hinzugefügt werden muss.
<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.
<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 margin
s aus .row
und die Horizontale padding
aus allen unmittelbar untergeordneten Spalten entfernt.
Benötigen Sie ein Edge-to-Edge-Design? Löschen Sie das übergeordnete Element .container
oder .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).
<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 $gutters
Sass-Map erstellt, die von der Sass-Map geerbt $spacers
wird.
$grid-gutter-width: 1.5rem;
$gutters: (
0: 0,
1: $spacer * .25,
2: $spacer * .5,
3: $spacer,
4: $spacer * 1.5,
5: $spacer * 3,
);