Bootstrap 4 Grid - Extra groß

XLarge Grid-Beispiel

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 eine Aufteilung von 25 %/75 % auf kleinen Geräten, eine Aufteilung von 50 %/50 % auf mittleren Geräten und eine Aufteilung von 33 %/66 % auf großen Geräten gegeben:

Aber auf xlarge-Geräten ist das Design mit einer Aufteilung von 20 %/80 % möglicherweise besser.

Für xlarge-Geräte verwenden wir die .col-xl-*Klassen:

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 20 %/80 % auf xlarge-Geräten. Auf extra kleinen Geräten wird automatisch gestapelt (100 %):

Verwenden Sie nur XLarge

Im folgenden Beispiel geben wir nur die .col-xl-6Klasse an (ohne .col-lg-*, .col-md-*und/oder .col-sm-*). Das bedeutet, dass xlarge-Geräte 50 %/50 % aufteilen. Bei großen, mittleren, kleinen UND extra kleinen Geräten wird es jedoch vertikal gestapelt (100 % Breite):

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-xl-*und verwenden Sie die .col-xlKlasse 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 1200 Pixel beträgt , werden die Spalten horizontal gestapelt: