Bootstrap Grid – Mittlere Geräte

Bootstrap-Grid-Beispiel: Mittlere Geräte

Im vorherigen Kapitel haben wir ein Grid-Beispiel mit Klassen für kleine Geräte vorgestellt. Wir haben zwei Divs (Spalten) verwendet und ihnen eine Aufteilung von 25 %/75 % gegeben:

Aber auf mittelgroßen Geräten ist das Design mit einer Aufteilung von 50 %/50 % möglicherweise besser.

Tipp: Mittelgroße Geräte haben eine Bildschirmbreite von 992 Pixel bis 1199 Pixel .

Für mittlere Geräte verwenden wir die .col-md-*Klassen.

Jetzt werden wir die Spaltenbreiten für mittlere Geräte hinzufügen:

Jetzt sagt Bootstrap: "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".

Das folgende Beispiel führt zu einer Aufteilung von 25 %/75 % auf kleinen Geräten und einer Aufteilung von 50 %/50 % auf mittleren (und großen) Geräten. Auf extra kleinen Geräten wird automatisch gestapelt (100 %):

Nur Medium verwenden

Im folgenden Beispiel geben wir nur die .col-md-6Klasse an (ohne .col-sm-*). Das bedeutet, dass sich mittlere und große Geräte 50 %/50 % aufteilen – weil die Klasse nach oben skaliert. Bei kleinen Geräten wird es jedoch vertikal gestapelt (100 % Breite):

Das nächste Kapitel zeigt, wie Sie für große Geräte einen anderen Teilungsprozentsatz hinzufügen.