Grid System
Die Spalten-Container bilden Bootstraps Grid als Inhaltselemente ab. Die Breite lässt sich je Breakpoint einzeln setzen; leer bedeutet: erbt vom nächstkleineren.
Interessant für den Test sind ungleiche Spalten, Hintergrundbilder in einzelnen Spalten und gleiche Höhe bei ungleich langem Inhalt.
Zwei Spalten, 8/4 ab md
Breite Spalte
Acht von zwölf Spalten ab dem md-Breakpoint. Darunter stapeln sich beide Spalten untereinander, weil xs auf 12 steht.
Dieser Text ist absichtlich länger als der in der Nachbarspalte, damit sich equal height überprüfen lässt.
Schmale Spalte
Vier von zwölf. Kurzer Text.
Drei Spalten, gleiche Breite
Erste
Mit Bild, quer.
Zweite
Mit Bild, hoch – in einer gleich breiten Spalte neben einem Querformat.
Dritte
Ohne Bild, damit die dritte Spalte deutlich kürzer ist als die beiden anderen.
Vier Spalten, ohne Zwischenraum
1
Ohne Zwischenraum stoßen die Spalten direkt aneinander.
2
Zweite Spalte.
3
Dritte Spalte.
4
Vierte Spalte, mit deutlich mehr Text als die drei anderen – ohne equal height stehen die Nachbarn dann kürzer da.
Row Columns – beliebig viele Kinder in einer Reihe
Kind A
Row Columns nimmt beliebig viele Kinder auf und verteilt sie über eine Reihe.
Kind B
Zweites Kind.
Kind C
Drittes Kind.
Auto-Layout – Spalten aus dem Inhalt
Gleiche Breite
Auto-Layout, Einstellung equal: die Spalten teilen sich den Platz gleichmäßig auf.
Feste Breite
Einstellung column mit vier Spalten – mischt sich mit den gleichverteilten Nachbarn.
[Randfall] gridSystem variable, nichts gesetzt
Auf variable gestellt, aber ohne einen einzigen Breakpoint-Wert. Genau dieser Fall lief heute in „Undefined array key smColumns“.
[Randfall] Zwei Spalten ohne FlexForm
Linke Spalte
Der Container hat kein FlexForm – keine Breiten, keine Zwischenräume, keine Ausrichtung. Erwartet: zwei gleich breite Spalten ab md.
Rechte Spalte
Zweite Spalte des FlexForm-losen Containers.
Zwei Spalten mit Hintergrundbild links
Spalte mit Hintergrund
Diese Spalte ist auf ein Hintergrundbild eingestellt, es ist aber keines zugewiesen. Der Code muss das aushalten und einfach nichts zeichnen – vor dem Fix las er bgimages und bgimagePosition ungeprüft.
Zweite Spalte
Mindesthöhe 320 px, Inhalt vertikal zentriert.