Bootstrap-Zeile mit Spalten unterschiedlicher Höhe

88

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) )

user3379926
quelle

Antworten:

167

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.

Bootstrap ungleichmäßige Umbruchspalten

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 ...

Geben Sie hier die Bildbeschreibung ein

<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


2 - Stellen Sie die Spalten auf die gleiche Höhe (mithilfe der Flexbox):

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 ...

Geben Sie hier die Bildbeschreibung ein

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

Flexbox gleich hohe Demo


3 - Entfernen Sie die Spalten und verwenden Sie stattdessen einen Inline-Block.

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: Geben Sie hier die Bildbeschreibung ein

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 .

Zim
quelle
Hier ist eine gute Richtlinie zur vertikalen Ausrichtung in bootstrap v4-alpha.getbootstrap.com/layout/grid . Besonders vertikale Ausrichtung und Klasse "Row Align-Items-Start"
Josh
2
WooW! Sie verdienen meine Stimme für diese bootply.com/120682 . Mit Masonry Plugin sieht es beim Laden der Seite nicht gut aus, wenn Sie ziehen, um die Bildschirmbreite anzupassen
Paullo
11

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;
}
Steve Whitby
quelle
Das hat bei mir funktioniert. Nur ich habe zweite CSS zu .col Eigenschaft gesetzt
RohitAneja
0

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;}

Akash Yellappa
quelle