Grid Layout sm [SMall]

Stopp Achtung
Achtung, diese Seite wurde für HTML 5 geschrieben. Scheinbar verwenden Sie einen alten Browser, der das nicht unterstützt. Es kann sein, dass nicht alle Seiten korrekt angezeigt werden. Sie sollten unbedingt eine aktuelle Version Ihres Browsers installieren.
schließen [X]

Es folgt eine Zeile (div class=row) mit 3 gleichen Spalten (jeweils 4 Basis-Spalten)

.col-sm-4
.col-sm-4
.col-sm-4


Es folgt eine Zeile (div class=row) mit 2 ungleichen Spalten (mit 4 und 8 Basis-Spalten)

.col-sm-4
.col-sm-8


Es folgt eine Zeile (div class=row) mit 4 ungleichen Spalten (mit 1, 2, 3 und Basis-Spalten)

.col-sm-1
.col-sm-2
.col-sm-3
.col-sm-6


Man kann es auch Spaltenweise anlegen, hier zwei gleich breite Spalten mit je 4 Zeilen

Zeile 1 in Spalte 1
Zeile 2 in Spalte 1
Zeile 3 in Spalte 1
Zeile 4 in Spalte 1
Zeile 1 in Spalte 2
Zeile 2 in Spalte 2
Zeile 3 in Spalte 2
Zeile 4 in Spalte 3


Oder aber ähnlich wie eine Tabelle, kurze und lange Spaltenweise. Bei schmalem Display wird die erste Spalte zur Überschrift der Beschreibung
.col-sm-2
.col-sm-10 Spalte mit einer langen Beschreibung, mit einer wirklich langen Beschreibung, nein mit einer sogar sehr sehr langen Beschreibung.
.col-sm-2
.col-sm-10 Spalte mit einer langen Beschreibung, mit einer wirklich langen Beschreibung, nein mit einer sogar sehr sehr langen Beschreibung.
.col-sm-2
.col-sm-10 Spalte mit einer langen Beschreibung, mit einer wirklich langen Beschreibung, nein mit einer sogar sehr sehr langen Beschreibung.
.col-sm-2
.col-sm-10 Spalte mit einer langen Beschreibung, mit einer wirklich langen Beschreibung, nein mit einer sogar sehr sehr langen Beschreibung.