Bootstrap 4 Gitter
Bootstrap-4-Grid-System
Das Rastersystem von Bootstrap ist mit Flexbox aufgebaut und erlaubt bis zu 12 Spalten auf der Seite.
Wenn Sie nicht alle 12 Spalten einzeln verwenden möchten, können Sie die Spalten zu breiteren Spalten zusammenfassen:
| Spannweite 1 | Spannweite 1 | Spannweite 1 | Spannweite 1 | Spannweite 1 | Spannweite 1 | Spannweite 1 | Spannweite 1 | Spannweite 1 | Spannweite 1 | Spannweite 1 | Spannweite 1 |
| Spanne 4 | Spanne 4 | Spanne 4 | |||||||||
| Spanne 4 | Spannweite 8 | ||||||||||
| Spannweite 6 | Spannweite 6 | ||||||||||
| Spannweite 12 | |||||||||||
Das Rastersystem reagiert und die Spalten werden je nach Bildschirmgröße automatisch neu angeordnet.
Stellen Sie sicher, dass die Summe 12 oder weniger ergibt (es ist nicht erforderlich, dass Sie alle 12 verfügbaren Spalten verwenden).
Grid-Klassen
Das Bootstrap 4 Grid-System hat fünf Klassen:
.col-(extra kleine Geräte - Bildschirmbreite kleiner als 576px).col-sm-(kleine Geräte – Bildschirmbreite gleich oder größer als 576 Pixel).col-md-(mittlere Geräte – Bildschirmbreite gleich oder größer als 768 Pixel).col-lg-(große Geräte – Bildschirmbreite gleich oder größer als 992 Pixel).col-xl-(xlarge-Geräte – Bildschirmbreite gleich oder größer als 1200 Pixel)
Die oben genannten Klassen können kombiniert werden, um dynamischere und flexiblere Layouts zu erstellen.
Tipp:sm Jede Klasse wird hochskaliert, wenn Sie also die gleichen Breiten für und festlegen möchten
md, müssen Sie nur angeben sm.
Grundstruktur eines Bootstrap 4 Grids
Das Folgende ist eine grundlegende Struktur eines Bootstrap 4-Rasters:
<!-- Control the column width, and how they should appear on different
devices -->
<div class="row">
<div class="col-*-*"></div>
<div class="col-*-*"></div>
</div>
<div class="row">
<div class="col-*-*"></div>
<div class="col-*-*"></div>
<div class="col-*-*"></div>
</div>
<!-- Or let Bootstrap automatically handle the layout -->
<div class="row">
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
</div>
Erstes Beispiel: Erstellen Sie eine Zeile ( <div
class="row">). Fügen Sie dann die gewünschte Anzahl von Spalten (Tags mit entsprechenden
.col-*-*Klassen) hinzu. Der erste Stern (*) steht für die Reaktionsfähigkeit: sm, md, lg oder xl, während der zweite Stern eine Zahl darstellt, die für jede Zeile 12 ergeben sollte.
Zweites Beispiel: Anstatt jedem eine Zahl hinzuzufügen col, überlassen Sie Bootstrap das Layout, um Spalten mit gleicher Breite zu erstellen: zwei "col"Elemente = 50 % Breite für jede Spalte. drei Spalten = 33,33 % Breite zu jeder Spalte. vier Spalten = 25 % Breite usw. Sie können auch verwenden .col-sm|md|lg|xl, um die Spalten responsive zu machen.
Nachfolgend haben wir einige Beispiele für grundlegende Bootstrap 4-Rasterlayouts zusammengestellt.
Drei gleiche Spalten
Das folgende Beispiel zeigt, wie Sie drei gleich breite Spalten auf allen Geräten und Bildschirmbreiten erstellen:
Beispiel
<div class="row">
<div class="col">.col</div>
<div class="col">.col</div>
<div class="col">.col</div>
</div>
Responsive Spalten
Das folgende Beispiel zeigt, wie Sie vier Spalten gleicher Breite erstellen, beginnend bei Tablets und bis hin zu extra großen Desktops skalieren. Auf Mobiltelefonen oder Bildschirmen, die weniger als 576 Pixel breit sind, werden die Spalten automatisch übereinander gestapelt :
Beispiel
<div class="row">
<div class="col-sm-3">.col-sm-3</div>
<div class="col-sm-3">.col-sm-3</div>
<div class="col-sm-3">.col-sm-3</div>
<div class="col-sm-3">.col-sm-3</div>
</div>
Zwei ungleiche Antwortspalten
Das folgende Beispiel zeigt, wie Sie zwei unterschiedlich breite Spalten beginnend bei Tablets erhalten und auf große zusätzliche Desktops skalieren:
Beispiel
<div class="row">
<div class="col-sm-4">.col-sm-4</div>
<div class="col-sm-8">.col-sm-8</div>
</div>
Tipp: Später in diesem Tutorial erfahren Sie mehr über Bootstrap 4-Raster.