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  [highlight color=”color here”] sixfootsixdesigns [/highlight] auf Github.

  1. Die Repo mit Bower installieren:
    bower install --save bootstrap-grid-columns-clearing
  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:

<div class="row multi-columns-row">
            <div class="col-xs-12 col-sm-6  col-md-6 col-lg-6">
                <img class="img-responsive img-thumbnail" src="https://placehold.it/200x300">
                <p>Lorem ipsum dolor sit amet, senserit recteque ex sea. Dicunt ponderum sententiae est id, at erant epicuri facilisis quo. Ad cum accusamus principes reprehendunt, elitr consulatu in est, eu ius melius euismod. Porro accumsan phaedrum id ius, et clita utinam noster eam. Eu mentitum epicurei lobortis eum, pro ea option regione.</p>
            </div>
            <div class="col-xs-12 col-sm-6  col-md-6 col-lg-6">
                <img class="img-responsive img-thumbnail" src="https://placehold.it/200x300">
                <p>Lorem ipsum dolor sit amet</p>
            </div>
            <div class=" col-xs-12 col-sm-6  col-md-6 col-lg-6">
                <img class="img-responsive img-thumbnail" src="https://placehold.it/200x300">
                <p>Lorem ipsum dolor sit amet, senserit recteque ex sea. Dicunt ponderum sententiae est id</p>
            </div>
        </div>

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

Column Clearing Problem Bootstrap Solved

 

[buttonC text=”Zum Repository auf Github” url=”https://github.com/sixfootsixdesigns/Bootstrap-3-Grid-Columns-Clearing” color=”HEX COLOR HERE”]

 

 

Leave a Reply

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

Scroll to Top