Bootstrap Grid – Große Geräte

Bootstrap-Grid-Beispiel: Große Geräte

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:

Aber auf großen Geräten kann das Design mit einer Aufteilung von 33 %/66 % besser sein.

Tipp: Als große Geräte gelten Geräte mit einer Bildschirmbreite ab 1200 Pixel .

Für große Geräte verwenden wir die .col-lg-*Klassen.

Also werden wir jetzt die Spaltenbreiten für große Geräte hinzufügen:

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 Geräten:

Nur groß verwenden

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