Bootstrap 4 Grid Stacked-to-horizontal
Bootstrap 4 Grid-Beispiel: Gestapelt bis horizontal
Wir werden ein grundlegendes Rastersystem erstellen, das auf extra kleinen Geräten gestapelt beginnt, bevor es auf größeren Geräten horizontal wird.
Das folgende Beispiel zeigt ein einfaches zweispaltiges Layout „gestapelt-zu-horizontal“, was bedeutet, dass es zu einer 50 %/50 %-Aufteilung auf allen Bildschirmen führt, mit Ausnahme von extra kleinen Bildschirmen, die automatisch gestapelt werden (100 %).
Beispiel: Gestapelt bis horizontal
<div class="container">
<div class="row">
<div class="col-sm-6 bg-success">
<p>Lorem ipsum...</p>
</div>
<div class="col-sm-6 bg-warning">
<p>Sed ut perspiciatis...</p>
</div>
</div>
</div>
Tipp: Die Zahlen in den .col-sm-*Klassen geben an, wie viele Spalten das div umfassen soll (von 12). Also, .col-sm-1überspannt 1 Spalte, .col-sm-4überspannt 4 Spalten,
.col-sm-6überspannt 6 Spalten usw.
Hinweis:
Stellen Sie sicher, dass die Summe 12 oder weniger ergibt (es ist nicht erforderlich, dass Sie alle 12 verfügbaren Spalten verwenden):
Tipp: Sie können jedes Layout mit fester Breite in ein Layout mit voller Breite.container umwandeln, indem Sie die Klasse ändern in .container-fluid:
Beispiel: Flüssigkeitsbehälter
<div class="container-fluid">
<div class="row">
<div class="col-sm-6">
<p>Lorem ipsum...</p>
</div>
<div class="col-sm-6">
<p>Sed ut perspiciatis...</p>
</div>
</div>
</div>
Spalten mit automatischem Layout
In Bootstrap 4 gibt es eine einfache Möglichkeit, Spalten mit gleicher Breite für alle Geräte zu erstellen: Entfernen Sie einfach die Zahl aus und verwenden Sie die Klasse nur für eine bestimmte Anzahl von
col -Elementen . Bootstrap erkennt, wie viele Spalten vorhanden sind, und jede Spalte erhält die gleiche Breite. Die Größenklassen bestimmen, wann die Spalten responsiv sein sollen:.col-size-*.col-size
<!-- Two columns: 50% width on all screens, except for extra small (100%
width) -->
<div class="row">
<div class="col-sm">1 of
2</div>
<div class="col-sm">2 of 2</div>
</div>
<!-- Four
columns: 25% width on all screens, except for extra small (100% width)-->
<div class="row">
<div class="col-sm">1 of 4</div>
<div class="col-sm">2 of 4</div>
<div class="col-sm">3
of 4</div>
<div class="col-sm">4 of 4</div>
</div>