Bootstrap 4 Grid-Beispiele
Nachfolgend haben wir einige Beispiele für Bootstrap 4-Grid-Layouts zusammengestellt.
Drei gleiche Spalten
Verwenden Sie die .colKlasse für eine bestimmte Anzahl von Elementen, und Bootstrap erkennt, wie viele Elemente vorhanden sind (und erstellt Spalten mit gleicher Breite). Im folgenden Beispiel verwenden wir drei col-Elemente, die jeweils eine Breite von 33,33 % erhalten.
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 steuern. Stellen Sie einfach sicher, dass die Summe 12 oder weniger ergibt (es ist nicht erforderlich, dass Sie alle 12 verfügbaren Spalten verwenden):
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>
Einstellen einer Spaltenbreite
Es reicht jedoch aus, nur die Breite einer Spalte festzulegen und die Größe der gleichgeordneten Spalten automatisch darum herum zu ändern. 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
<!-- Two equal columns -->
<div class="row">
<div class="col">1 of 2</div>
<div class="col">2 of 2</div>
</div>
<!-- Four equal columns -->
<div class="row">
<div class="col">1 of 4</div>
<div class="col">2 of 4</div>
<div class="col">3
of 4</div>
<div class="col">4 of 4</div>
</div>
<!-- Six equal columns -->
<div class="row">
<div class="col">1 of 6</div>
<div class="col">2 of 6</div>
<div class="col">3
of 6</div>
<div class="col">4 of 6</div>
<div class="col">5
of 6</div>
<div class="col">6 of 6</div>
</div>
Zeile Spalten
Auch wie viele Spalten nebeneinander erscheinen sollen (egal wie viele Spalten), können Sie mit den .row-cols-*Klassen steuern:
Beispiel
<div class="row row-cols-1">
<div class="col">1 of 2</div>
<div class="col">2 of 2</div>
</div>
<div class="row row-cols-2">
<div class="col">1 of 4</div>
<div class="col">2 of 4</div>
<div class="col">3
of 4</div>
<div class="col">4 of 4</div>
</div>
<div class="row row-cols-3">
<div class="col">1 of 6</div>
<div class="col">2 of 6</div>
<div class="col">3
of 6</div>
<div class="col">4 of 6</div>
<div class="col">5
of 6</div>
<div class="col">6 of 6</div>
</div>
Mehr ungleiche Spalten
Beispiel
<!-- Two Unequal
Columns -->
<div class="row">
<div class="col-8">1 of 2</div>
<div class="col-4">2 of 2</div>
</div>
<!-- Four Unequal Columns -->
<div class="row">
<div class="col-2">1 of 4</div>
<div class="col-2">2 of 4</div>
<div class="col-2">3
of 4</div>
<div class="col-6">4 of 4</div>
</div>
<!-- Setting two column widths -->
<div class="row">
<div class="col-4">1 of 4</div>
<div class="col-6">2 of 4</div>
<div class="col">3
of 4</div>
<div class="col">4 of 4</div>
</div>
Gleiche Höhe
Wenn eine der Spalten höher ist als die andere (aufgrund der Text- oder CSS-Höhe), folgt der Rest:
Beispiel
<div class="row">
<div class="col">Lorem ipsum...</div>
<div class="col">col</div>
<div class="col">col</div>
</div>
Verschachtelte Spalten
Das folgende Beispiel zeigt, wie Sie ein zweispaltiges Layout mit zwei weiteren Spalten in einer der Spalten erstellen:
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>
Reaktionsfähige 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.
Auf Horizontal gestapelt
Das folgende Beispiel zeigt, wie Sie ein Spaltenlayout erstellen, das auf extra kleinen Geräten gestapelt beginnt, bevor es auf größeren Geräten (sm, md, lg und xl) horizontal wird:
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>
Mischen und Anpassen
Beispiel
<!-- 50%/50% split on extra small devices and 75%/25% split on larger devices
-->
<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>
<!-- 58%/42% split
on extra small, small and medium devices and 66.3%/33.3% split on large and
xlarge devices -->
<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>
<!-- 25%/75% split on small devices, a 50%/50% split
on medium devices, and a 33%/66% split on large and xlarge devices. On extra
small devices, it will automatically stack (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 Dachrinnen
Fügen Sie die .no-guttersKlasse dem .rowContainer hinzu, um Dachrinnen zu entfernen (zusätzlicher Platz):
Daher wird jeder von uns meistens jede Art von Beschäftigung ausüben, außer um die daraus resultierenden Ziele zu nutzen.
Beispiel
<div class="row no-gutters">