Bootstrap 3 Column Clearing Problem

Das Problem:

Alle die schon mal mit Bootstrap gearbeitet haben, kennen das Problem:

Man hat eine unbekannte Anzahl von z.B. Bildern welche in zwei Spalten angezeigt werden sollen. Dazu hat man noch noch eine Bildbeschreibung von unbekannter Länge. Wenn man dann die Auflistung anzeigt, trifft man auf untenstehende Anordung der “Zellen” (Hier sollte eigentlich das dritte Bild unter dem Ersten sein).

Column Clearing Problem Bootstrap

 

Die Lösung:

Es gibt einen Fix von   sixfootsixdesigns auf Github.

  1. Die Repo mit Bower installieren:
  2. Nach Bootstrap in die Seite einbinden (Wichtig!)
  3. Die Klasse .multi-columns-row dem umschliessenden div-Container (.row) hinzufügen.
  4. Ausserdem muss nun jeder “Zelle” für jede Bildschirmgrösse die Spaltenbreite angegeben werden, da es ansonsten wieder falsch angezeigt wird.

Hier den HTML Code für das Beispiel:

Hat man alles richtig gemacht sollte nun das dritte Bild unterhalb des Ersten stehen:

Column Clearing Problem Bootstrap Solved

 

Zum Repository auf Github

 

 

Leave a Reply

Your email address will not be published. Required fields are marked *