Wiersz bootstrap z kolumnami o różnej wysokości

Obecnie mam coś takiego:

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

Zakładając, że contentbyły to pudełka o różnej wysokości i tej samej szerokości - jak mógłbym zachować ten sam „układ oparty na siatce”, a jednocześnie mieć wszystkie pola ustawione w jednej linii, zamiast w idealnych liniach.

Obecnie TWBS umieści następną linię col-md-4pod najdłuższym elementem w poprzednim trzecim rzędzie., Dzięki czemu każdy rząd elementów jest idealnie wyrównany i czysty - chociaż jest to niesamowite, chcę, aby każdy element znalazł się bezpośrednio pod ostatnim elementem (układ "Masonry" )

To popularne pytanie Bootstrap, więc zaktualizowałem i rozszerzyłem odpowiedź dla Bootstrap 3 i Bootstrap 4 ...

Bootstrap 3 „ Problem wysokość ” występuje, ponieważ kolumny użyć float:left. Kiedy kolumna jest „pływająca”, jest usuwana z normalnego przepływu dokumentu. Jest przesuwany w lewo lub w prawo, aż dotknie krawędzi swojego pudełka. Tak więc, gdy masz nierówne wysokości kolumn , poprawnym zachowaniem jest ułożenie ich jak najbliżej.

Uwaga : Poniższe opcje mają zastosowanie do scenariuszy zawijania kolumn , w których występuje więcej niż 12 jednostek col w jednym.row . Dla czytelników, którzy nie rozumieją, dlaczego kiedykolwiek byłoby więcej niż 12 kolumn z rzędu lub uważają, że rozwiązaniem jest „użycie oddzielnych wierszy”, powinni przeczytać to najpierw

Istnieje kilka sposobów, aby to naprawić ... (aktualizacja na 2018 r.)

1 - Podejście „clearfix” ( zalecane przez Bootstrap ) w ten sposób (wymaga iteracji co X kolumn). To wymusi zawijanie co X liczbę kolumn ...

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

Clearfix Demo (responsywne poziomy) - np.col-sm-6 col-md-4 col-lg-3

Istnieje również odmiana tylko CSS „clearfix”
tylko CSS clearfix z tabelami

Ponieważ problem jest spowodowany różnicą wysokości, możesz ustawić równą wysokość kolumn w każdym wierszu. Flexbox to najlepszy sposób na zrobienie tego i jest natywnie obsługiwany w Bootstrap 4 ...

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

Demo Flexbox o równej wysokości

Ponownie problem z wysokością występuje tylko dlatego, że kolumny są pływające. Inną opcją jest ustawienie kolumn na display:inline-blocki float:none. Zapewnia to również większą elastyczność przy wyrównaniu w pionie. Jednak w tym rozwiązaniu nie może być spacji HTML między kolumnami , w przeciwnym razie elementy inline-block będą miały dodatkową przestrzeń i zostaną zawinięte przedwcześnie.

Demo poprawki blokowej

4 - Podejście do kolumn CSS3 (rozwiązanie podobne do Masonry / Pinterest).

To nie jest natywne dla Bootstrap 3, ale inne podejście wykorzystujące wiele kolumn CSS . Wadą tego podejścia jest kolejność kolumn od góry do dołu zamiast od lewej do prawej. Bootstrap 4 zawiera tego typu rozwiązanie : Bootstrap 4 Kartonry Cards Demo .

Wielokolumnowe Demo Bootstrap 3

5 - Podejście masonry JavaScript / jQuery

Wreszcie, możesz chcieć użyć wtyczki, takiej jak Isotope / Masonry:

Bootstrap Masonry Demo Demo
Masonry 2

Więcej o kolumnach o zmiennej wysokości Bootstrap

Aktualizacja 2018
Wszystkie kolumny mają równą wysokość w Bootstrap 4, ponieważ domyślnie używa on flexboksa, więc „problem z wysokością” nie stanowi problemu. Dodatkowo Bootstrap 4 zawiera tego typu rozwiązanie wielokolumnowe: Bootstrap 4 Kartonry Cards Demo .

Z jakiegoś powodu zadziałało to dla mnie bez klasy .display-flex

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

Utworzyłem kolejne rozszerzenie (które również jest reaktywne) do wiersza ładowania początkowego. Możesz spróbować czegoś takiego:

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