Bootstrap 5-Grid-Beispiel
- Vorherige Seite BS5-Gitter XXL
- Nächste Seite BS5-Basisvorlage
Nachfolgend haben wir einige Beispiele für das Rasterlayout von Bootstrap 5 zusammengefasst.
Drei gleiche Spalten
Verwenden Sie .col Klassen, Bootstrap erkennt die Anzahl der Elemente (und erstellt gleich breite Spalten). Im folgenden Beispiel verwenden wir drei col-Elemente, wobei jeder Element eine Breite von 33.33% hat.
Beispiel
<div class="row"> <div class="col">col</div> <div class="col">col</div> <div class="col">col</div> </div>
Drei gleiche Spalten mit Zahlen
Sie können auch Zahlen verwenden, um die Spaltenbreite zu kontrollieren. Stellen Sie nur sicher, dass die Summe 12 oder weniger beträgt (es müssen nicht alle 12 verfügbaren Spalten verwendet werden):
Beispiel
<div class="row"> <div class="col-4">col-4</div> <div class="col-4">col-4</div> <div class="col-4">col-4</div> </div>
Drei ungleiche Spalten
Um ungleiche Spalten zu erstellen, müssen Sie Zahlen verwenden. Das folgende Beispiel erstellt eine Aufteilung von 25%/50%/25%:
Beispiel
<div class="row"> <div class="col-3">col-3</div> <div class="col-6">col-6</div> <div class="col-3">col-3</div> </div>
Spaltenbreite setzen
Allerdings reicht es aus, nur die Breite einer Spalte zu setzen und die benachbarten Spalten automatisch anpassen zu lassen. Das folgende Beispiel erstellt eine Aufteilung von 25%/50%/25%:
Beispiel
<div class="row"> <div class="col">col</div> <div class="col-6">col-6</div> <div class="col">col</div> </div>
Mehr gleiche Spalten
Beispiel
<!-- zwei gleiche Spalten --> <div class="row"> <div class="col">1 von 2</div> <div class="col">2 von 2</div> </div> <!-- vier gleiche Spalten --> <div class="row"> <div class="col">1 von 4</div> <div class="col">2 von 4</div> <div class="col">3 von 4</div> <div class="col">4 von 4</div> </div> <!-- sechs gleiche Spalten --> <div class="row"> <div class="col">1 von 6</div> <div class="col">2 von 6</div> <div class="col">3 von 6</div> <div class="col">4 von 6</div> <div class="col">5 von 6</div> <div class="col">6 von 6</div> </div>
Row Cols
Sie können auch .row-cols-* Die Spaltenkontrolle sollte in benachbarten Spalten nebeneinander erscheinen (unabhängig von der Anzahl der Spalten):
Beispiel
<div class="row row-cols-1"> <div class="col">1 von 2</div> <div class="col">2 von 2</div> </div> <div class="row row-cols-2"> <div class="col">1 von 4</div> <div class="col">2 von 4</div> <div class="col">3 von 4</div> <div class="col">4 von 4</div> </div> <div class="row row-cols-3"> <div class="col">1 von 6</div> <div class="col">2 von 6</div> <div class="col">3 von 6</div> <div class="col">4 von 6</div> <div class="col">5 von 6</div> <div class="col">6 von 6</div> </div>
Mehr ungleiche Spalten
Beispiel
<!-- zwei ungleiche Spalten --> <div class="row"> <div class="col-8">1 von 2</div> <div class="col-4">2 von 2</div> </div> <!-- Vier ungleiche Spalten --> <div class="row"> <div class="col-2">1 von 4</div> <div class="col-2">2 von 4</div> <div class="col-2">3 von 4</div> <div class="col-6">4 von 4</div> </div> <!-- Setting two column widths --> <div class="row"> <div class="col-4">1 von 4</div> <div class="col-6">2 von 4</div> <div class="col">3 von 4</div> <div class="col">4 von 4</div> </div>
Gleiche Höhe
Wenn eine Spalte höher ist als die andere (aufgrund von Text oder CSS-Höhe), folgen die übrigen daraufhin:
Beispiel
<div class="row"> <div class="col">Lorem ipsum...</div> <div class="col">col</div> <div class="col">col</div> </div>
Eingekapselte Spalten
Das folgende Beispiel zeigt, wie ein Layout mit zwei Spalten erstellt wird, von dem eine Spalte zwei weitere Spalten enthält:
Beispiel
<div class="row">
<div class="col-8">
.col-8
<div class="row">
<div class="col-6">.col-6</div>
<div class="col-6">.col-6</div>
</div>
</div>
<div class="col-4">.col-4</div>
</div>
Responsive-Klassen
Das Bootstrap 5-Grid-System verfügt über fünf Klassen:
.col-(ultrakleine Geräte - Bildschirmbreite beträgt weniger als 576 Pixel).col-sm-(kleine Geräte - Bildschirmbreite beträgt 576 Pixel oder mehr).col-md-(mittlere Geräte - Bildschirmbreite beträgt 768 Pixel oder mehr).col-lg-(große Geräte - Bildschirmbreite beträgt 992 Pixel oder mehr).col-xl-(xlarge-Geräte - Bildschirmbreite beträgt 1200px oder mehr).col-xxl-(xxlarge-Geräte - Bildschirmbreite beträgt 1400px oder mehr)
die oben genannten Klassen kombinieren, um dynamischere und flexiblere Layouts zu erstellen.
Hinweis:jede Klasse wird proportional vergrößert, daher sollten Sie sm und md Wenn gleiche Breiten eingestellt werden, genügt es, sm.
Von gestapelt zu horizontal
Das folgende Beispiel zeigt, wie ein Spaltenlayout erstellt wird, das zunächst auf ultrakleinen Geräten gestapelt ist und dann auf größeren Geräten (sm, md, lg und xl) in eine horizontale Anordnung übergeht:
Beispiel
<div class="row"> <div class="col-sm-9">col-sm-9</div> <div class="col-sm-3">col-sm-3</div> </div> <div class="row"> <div class="col-sm">col-sm</div> <div class="col-sm">col-sm</div> <div class="col-sm">col-sm</div> </div>
Mix und Match
Beispiel
<!-- Auf extra kleinen Geräten 50%/50% geteilt, auf großen Geräten 75%/25% geteilt --> <div class="row"> <div class="col-6 col-sm-9">col-6 col-sm-9</div> <div class="col-6 col-sm-3">col-6 col-sm-3</div> </div> <!-- Auf extra kleinen, kleinen, mittleren Geräten 58%/42% geteilt, auf großen und extra großen Geräten 66.3%/33.3% geteilt --> <div class="row"> <div class="col-7 col-lg-8">col-7 col-lg-8</div> <div class="col-5 col-lg-4">col-5 col-lg-4</div> </div> <!-- Auf kleinen Geräten 25%/75% geteilt, auf mittleren Geräten 50%/50% geteilt, auf großen und extra großen Geräten 33%/66% geteilt. Auf extra kleinen Geräten wird automatisch gestapelt (100%) --> <div class="row"> <div class="col-sm-3 col-md-6 col-lg-4">col-sm-3 col-md-6 col-lg-4</div> <div class="col-sm-9 col-md-6 col-lg-8">col-sm-9 col-md-6 col-lg-8</div> </div>
Keine gutter
Um den Abstand zwischen den Spalten (zusätzlichen Raum) zu ändern, verwenden Sie jede .g-1|2|3|4|5 Klasse (.g-4 ist der Standardwert).
Um die Nähte (gutter) vollständig zu entfernen, verwenden Sie .g-0:
Beispiel
<div class="row g-0">
- Vorherige Seite BS5-Gitter XXL
- Nächste Seite BS5-Basisvorlage
