Bootstrap-Raster-Beispiele

Einfache Raster-Layouts zeigen dir und gewöhnen dich an das Bootstrap-Rastersystem.

Drei gleiche Spalten

Erstelle drei Spalten mit gleichen Breiten, die auf normalen und großen Desktop-PCs nebeneinander sind. Auf mobilen Geräten (Tablets und kleiner) sind die Spalten automatisch gestapelt.

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

Drei ungleiche Spalten

Erstelle drei Spalten mit ungleichen Breiten, die auf normalen und großen Desktop-PCs nebeneinander sind. Denk daran, dass Rasterspalten für einen einzelnen horizontalen Block insgesamt 12 sein sollten. Wenn es mehr sind werden sie unabhängig vom Ansichtsfenster untereinander angeordnet.

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

Zwei Spalten

Erstelle zwei Spalten, die auf normalen und großen Desktop-PCs nebeneinander sind.

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

Eine Spalte über die ganze Breite

Für Elemente, die auf der gesamten Breite der Seite erscheinen sollen, sind keine Rasterklassen notwendig.

Zwei Spalten mit zwei verschachtelten Spalten

Folge der Dokumentation und Verschachtelung ist ganz einfach. Füge einfach eine Zeile mit Spalten innerhalb von einer bestehenden Spalte ein und du erhältst zwei Spalten, die auf normalen und großen Desktop-PCs nebeneinander sind, plus zwei (gleich breite) Spalten in der größeren Spalte.

Auf kleineren Bildschirmen (Tablets und kleiner) werden diese Spalten, auch die verschachtelten, übereinander gestapelt.

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

Gemischt: Smartphones und Desktop-PCs

Das Rastersystem in Bootstrap 3 hat vier Glieder: xs (Smartphones), sm (Tablets), md (Desktop-PCs) und lg (größere Desktop-PCs). Du kannst fast jede Kombination dieser Klassen verwenden, um dynamische und flexible Layouts zu erstellen.

Jede Gruppe von Klassen skaliert sich auf alle Gruppen darüber, solange es keine Angabe darüber für größere Bildschirme gibt. Das bedeutet, dass du z.B. für xs und sm nur xs angeben musst.

.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: Smartphones, Tablets und Desktop-PCs

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

Spalten zurücksetzen

Entferne Floats bei bestimmten Bildschirmgrößen, um komische Umbrüche bei ungleichmäßigem Inhalt zu vermeiden.

.col-xs-6 .col-sm-3
Verändere die Größe deines Browser-Fensters oder öffne die Seite auf deinem Smartphone für ein Beispiel.
.col-xs-6 .col-sm-3
.col-xs-6 .col-sm-3
.col-xs-6 .col-sm-3

Versatz, Push und Pull zurücksetzen

Setze Absetzungen, Pushes und Pulls an bestimmten Umbruchpunkten 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