Beispiele für Bootstrap-Raster

Grundlegende Grid-Layouts, um Sie mit dem Bauen innerhalb des Bootstrap-Grid-Systems vertraut zu machen.

Drei gleiche Spalten

Erhalten Sie drei Spalten gleicher Breite, beginnend bei Desktops und Skalierung auf große Desktops . Auf Mobilgeräten, Tablets und darunter werden die Spalten automatisch gestapelt.

.col-md-4
.col-md-4
.col-md-4

Drei ungleiche Spalten

Holen Sie sich drei Spalten, beginnend bei Desktops und Skalierung auf große Desktops unterschiedlicher Breite. Denken Sie daran, dass sich die Rasterspalten für einen einzelnen horizontalen Block auf zwölf summieren sollten. Darüber hinaus beginnen die Spalten unabhängig vom Ansichtsfenster zu stapeln.

.col-md-3
.col-md-6
.col-md-3

Zwei Spalten

Holen Sie sich zwei Spalten, beginnend bei Desktops und Skalierung auf große Desktops .

.col-md-8
.col-md-4

Volle Breite, einspaltig

Für Elemente mit voller Breite sind keine Rasterklassen erforderlich.

Zwei Spalten mit zwei verschachtelten Spalten

Laut Dokumentation ist das Verschachteln einfach – fügen Sie einfach eine Reihe von Spalten in eine vorhandene Spalte ein. Dadurch erhalten Sie zwei Spalten , die bei Desktops beginnen und zu großen Desktops skalieren , mit zwei weiteren (gleichen Breiten) innerhalb der größeren Spalte.

Bei Mobilgeräten, Tablets und darunter, werden diese Spalten und ihre verschachtelten Spalten gestapelt.

.col-md-8
.col-md-6
.col-md-6
.col-md-4

Gemischt: Mobil und Desktop

Das Bootstrap 3-Grid-System hat vier Klassenklassen: xs (Telefone), sm (Tablets), md (Desktops) und lg (größere Desktops). Sie können nahezu jede Kombination dieser Klassen verwenden, um dynamischere und flexiblere Layouts zu erstellen.

Jede Klasse von Klassen wird hochskaliert, d. h. wenn Sie die gleichen Breiten für xs und sm festlegen möchten, müssen Sie nur xs angeben.

.col-xs-12 .col-md-8
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6
.col-xs-6

Gemischt: Handy, Tablet und Desktop

.col-xs-12 .col-sm-6 .col-lg-8
.col-sm-6 .col-lg-4
.col-xs-6 .col-sm-4
.col-xs-6 .col-sm-4
.col-xs-6 .col-sm-4

Spalte löschen

Löschen Sie Floats an bestimmten Haltepunkten, um ein umständliches Umbrechen mit ungleichmäßigem Inhalt zu verhindern.

.col-xs-6 .col-sm-3
Ändern Sie die Größe Ihres Ansichtsfensters oder sehen Sie es sich auf Ihrem Telefon an, um ein Beispiel zu erhalten.
.col-xs-6 .col-sm-3
.col-xs-6 .col-sm-3
.col-xs-6 .col-sm-3

Offset-, Push- und Pull-Resets

Setzen Sie Offsets, Pushs und Pulls an bestimmten Breakpoints zurück.

.col-sm-5 .col-md-6
.col-sm-5 .col-sm-offset-2 .col-md-6 .col-md-offset-0
.col-sm-6 .col-md-5 .col-lg-6
.col-sm-6 .col-md-5 .col-md-offset-2 .col-lg-6 .col-lg-offset-0