Bootstrap-Zeile mit Spalten unterschiedlicher Höhe

Ich habe derzeit so etwas wie:

<div class="row">
    <div class="col-md-4">Content</div>
    <div class="col-md-4">Content</div>
    <div class="col-md-4">Content</div>
    <div class="col-md-4">Content</div>
    <div class="col-md-4">Content</div>
    <div class="col-md-4">Content</div>
    <div class="col-md-4">Content</div>
    <div class="col-md-4">Content</div>
    <div class="col-md-4">Content</div>
</div>

Angenommen, contentes handelte sich um Boxen unterschiedlicher Höhe mit derselben Breite - wie könnte ich das gleiche "gitterbasierte Layout" beibehalten und dennoch alle Boxen untereinander ausrichten, anstatt in perfekten Linien.

Derzeit platziert TWBS die nächste Zeile col-md-4unter dem längsten Element in der vorherigen dritten Zeile. Daher ist jede Elementreihe perfekt ausgerichtet und sauber - während dies fantastisch ist, möchte ich, dass jedes Element direkt unter das letzte Element fällt ("Masonry" -Layout) )

Dies ist eine beliebte Bootstrap-Frage, daher habe ich die Antwort für Bootstrap 3 und Bootstrap 4 aktualisiert und erweitert ...

Das Bootstrap 3 " Höhenproblem " tritt auf, weil die Spalten verwenden float:left. Wenn eine Spalte "schwebt", wird sie aus dem normalen Fluss des Dokuments entfernt. Es wird nach links oder rechts verschoben, bis es den Rand der enthaltenen Box berührt. Wenn Sie also ungleichmäßige Spaltenhöhen haben , ist es das richtige Verhalten, sie auf die nächste Seite zu stapeln.

Hinweis : Die folgenden Optionen gelten für Spaltenumbruch- Szenarien, in denen mehr als 12 .rowSpalteneinheiten in einer einzelnen enthalten sind . Für Leser, die nicht verstehen, warum es jemals mehr als 12 Spalten in einer Reihe geben würde , oder die denken, dass die Lösung darin besteht, "separate Zeilen zu verwenden", sollte dies zuerst gelesen werden

Es gibt einige Möglichkeiten, dies zu beheben. (Aktualisiert für 2018)

1 - Der 'Clearfix'-Ansatz ( von Bootstrap empfohlen ) wie dieser (erfordert eine Iteration aller X- Spalten). Dadurch wird jede X- Anzahl von Spalten umbrochen ...

<div class="row">
    <div class="col-md-4">Content</div>
    <div class="col-md-4">Content</div>
    <div class="col-md-4">Content</div>
    <div class="clearfix"></div>
    <div class="col-md-4">Content</div>
    <div class="col-md-4">Content</div>
    <div class="col-md-4">Content</div>
    <div class="clearfix"></div>
    <div class="col-md-4">Content</div>
    <div class="col-md-4">Content</div>
    <div class="col-md-4">Content</div>
</div>

Clearfix Demo (einstufig)

Clearfix Demo (Responsive Tiers) - z.col-sm-6 col-md-4 col-lg-3

Es gibt auch eine Nur-CSS-Variante des Nur- CSS-Clearfix 'Clearfix'
mit Tabellen

Da das Problem durch den Höhenunterschied verursacht wird , können Sie Spalten in jeder Zeile gleich hoch machen . Flexbox ist der beste Weg, dies zu tun, und wird in Bootstrap 4 nativ unterstützt ...

.row.display-flex {
  display: flex;
  flex-wrap: wrap;
}
.row.display-flex > [class*='col-'] {
  display: flex;
  flex-direction: column;
}

Flexbox gleich hohe Demo

Auch hier tritt das Höhenproblem nur auf, weil die Spalten schweben. Eine andere Möglichkeit besteht darin, die Spalten auf display:inline-blockund zu setzen float:none. Dies bietet auch mehr Flexibilität für die vertikale Ausrichtung. Bei dieser Lösung darf jedoch kein HTML-Leerzeichen zwischen den Spalten vorhanden sein , da die Inline-Block-Elemente sonst zusätzlichen Speicherplatz haben und vorzeitig umbrochen werden.

Demo von Inline Block Fix

4 - CSS3-Spaltenansatz (Masonry / Pinterest-ähnliche Lösung).

Dies ist nicht für Bootstrap 3 typisch, sondern ein anderer Ansatz, bei dem CSS-Mehrspalten verwendet werden . Ein Nachteil dieses Ansatzes ist, dass die Spaltenreihenfolge von oben nach unten statt von links nach rechts erfolgt. Bootstrap 4 enthält diese Art von Lösung : Bootstrap 4 Masonry Cards Demo .

Bootstrap 3 mehrspaltige Demo

5 - Masonry JavaScript / jQuery-Ansatz

Schließlich möchten Sie möglicherweise ein Plugin wie Isotope / Masonry verwenden:

Bootstrap Masonry Demo
Masonry Demo 2

Weitere Informationen zu Bootstrap-Spalten mit variabler Höhe

Update 2018
Alle Spalten sind in Bootstrap 4 gleich hoch, da standardmäßig Flexbox verwendet wird, sodass das "Höhenproblem" kein Problem darstellt. Darüber hinaus enthält Bootstrap 4 diese Art von mehrspaltiger Lösung: Bootstrap 4 Masonry Cards Demo .

Aus irgendeinem Grund funktionierte dies für mich ohne die .display-flex-Klasse

.row {
    display: flex;
    flex-wrap: wrap;
}
.row > [class*='col-'] {
    display: flex;
    flex-direction: column;
}

Ich habe eine weitere Erweiterung (die ebenfalls reaktiv ist) für die Bootstrap-Zeile erstellt. Sie können so etwas ausprobieren:

.row.flexRow { display: flex; flex-wrap: wrap;}