Bootstrap 4 Grid - Groß
Beispiel für ein großes Raster
Extra small | Small | Medium | Large | Extra Large | |
---|---|---|---|---|---|
Class prefix | .col- |
.col-sm- |
.col-md- |
.col-lg- |
.col-xl- |
Screen width | <576px | >=576px | >=768px | >=992px | >=1200px |
Im vorherigen Kapitel haben wir ein Grid-Beispiel mit Klassen für kleine und mittlere Geräte vorgestellt. Wir haben zwei Divs (Spalten) verwendet und ihnen auf kleinen Geräten eine Aufteilung von 25 %/75 % und auf mittleren Geräten eine Aufteilung von 50 %/50 % gegeben:
<div class="col-sm-3 col-md-6">....</div>
<div class="col-sm-9 col-md-6">....</div>
Aber auf großen Geräten kann das Design mit einer Aufteilung von 33 %/66 % besser sein.
Große Geräte haben eine Bildschirmbreite von 992 Pixel bis 1199 Pixel .
Für große Geräte verwenden wir die .col-lg-*
Klassen:
<div class="col-sm-3 col-md-6 col-lg-4">....</div>
<div class="col-sm-9 col-md-6 col-lg-8">....</div>
Jetzt wird Bootstrap sagen: "Schauen Sie sich bei der kleinen Größe Klassen mit -sm- an und verwenden Sie diese. Bei der mittleren Größe sehen Sie sich Klassen mit -md- an und verwenden Sie diese. Bei der großen Größe sehen Sie sich an Klassen mit dem Wort -lg- und verwenden Sie diese".
Das folgende Beispiel führt zu einer Aufteilung von 25 %/75 % auf kleinen Geräten, einer Aufteilung von 50 %/50 % auf mittleren Geräten und einer Aufteilung von 33 %/66 % auf großen und xlarge-Geräten. Auf extra kleinen Geräten wird automatisch gestapelt (100 %):
Beispiel
<div class="container-fluid">
<div class="row">
<div class="col-sm-3 col-md-6 col-lg-4">
<p>Lorem ipsum...</p>
</div>
<div class="col-sm-9 col-md-6 col-lg-8">
<p>Sed ut perspiciatis...</p>
</div>
</div>
</div>
Hinweis: Stellen Sie sicher, dass die Summe 12 oder weniger ergibt (es ist nicht erforderlich, dass Sie alle 12 verfügbaren Spalten verwenden):
Nur groß verwenden
Im Beispiel unten geben wir nur die .col-lg-6
Klasse an (ohne .col-md-*
und/oder .col-sm-*
). Das bedeutet, dass große und xlarge-Geräte 50 %/50 % aufteilen. Bei mittelgroßen, kleinen UND extra kleinen Geräten wird es jedoch vertikal gestapelt (100 % Breite):
Beispiel
<div class="container-fluid">
<div class="row">
<div class="col-lg-6">
<p>Lorem ipsum...</p>
</div>
<div class="col-lg-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 .col-lg-*
und verwenden Sie die .col-lg
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.
Wenn die Bildschirmgröße weniger als 992 Pixel beträgt , werden die Spalten horizontal gestapelt:
<!-- Two columns: 50% width on large and up-->
<div class="row">
<div class="col-lg">1 of
2</div>
<div class="col-lg">2 of 2</div>
</div>
<!-- Four
columns: 25% width on large and up -->
<div class="row">
<div class="col-lg">1 of 4</div>
<div class="col-lg">2 of 4</div>
<div class="col-lg">3
of 4</div>
<div class="col-lg">4 of 4</div>
</div>