Рядок Bootstrap зі стовпцями різної висоти

На даний момент я маю щось на зразок:

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

Тепер припускаючи, що це contentбули коробки різної висоти, з однаковою шириною - як я міг зберегти той самий «макет на основі сітки», і все ж мати всі ящики, розташовані один під одним, замість ідеальних ліній.

В даний час TWBS розмістить наступний рядок col-md-4під найдовшим елементом у попередньому третьому рядку., Таким чином, кожен рядок елементів ідеально вирівняний по чистоті - хоча це чудово, я хочу, щоб кожен елемент потрапляв безпосередньо під останній елемент (макет "Кладка" )

Це популярне запитання Bootstrap, тому я оновив та розширив відповідь для Bootstrap 3 та Bootstrap 4 ...

Bootstrap 3 « проблема висоти » відбувається тому , що стовпчики використовувати float:left. Коли стовпець «плаває», він виводиться із звичайного потоку документа. Він зміщується вліво або вправо, доки він не торкнеться краю контейнера, що містить його. Отже, коли у вас нерівномірна висота стовпчиків , правильною поведінкою є складання їх до найближчої сторони.

Примітка : Наведені нижче варіанти застосовні до сценаріїв переносу стовпців, коли в одному.row є більше 12 одиниць колон . Читачам, які не розуміють, чому коли-небудь буде більше 12 збірок підряд , або вважають, що рішення полягає у "використанні окремих рядків", слід прочитати це спочатку

Є кілька способів це виправити .. (оновлено на 2018 рік)

1 - Подібний підхід ( рекомендований Bootstrap ) (вимагає ітерації кожних X стовпців). Це змусить обтікати кожні X кількість стовпців ...

<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 (однорівнева)

Демонстрація Clearfix (адаптивні рівні) - напр.col-sm-6 col-md-4 col-lg-3

Існує також CSS-тільки варіація на «clearfix»
CSS-тільки clearfix з таблицями

Оскільки проблема спричинена різницею у висоті, ви можете зробити стовпці однакової висоти в кожному рядку. Flexbox - найкращий спосіб зробити це, і він підтримується в Bootstrap 4 ...

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

Демонстрація Flexbox рівної висоти

Знову ж таки, проблема висоти виникає лише тому, що стовпці плаваючі. Інший варіант - встановити для стовпців значення display:inline-blockі float:none. Це також забезпечує більшу гнучкість для вертикального вирівнювання. Однак у цьому рішенні між стовпцями не повинно бути пробілів HTML , інакше елементи вбудованого блоку мають додатковий простір і завчасно загортаються.

Демо виправлення вбудованого блоку

4 - Підхід до стовпців CSS3 (рішення, подібне до кладки / Pinterest).

Це не рідне для Bootstrap 3, а інший підхід, що використовує багатостолбці CSS . Недоліком цього підходу є порядок стовпців зверху вниз, а не зліва направо. Bootstrap 4 включає такий тип рішення : Bootstrap 4 Masonry cards Demo .

Завантажувальна демонстрація 3 багатоколонних

5 - Кладовий підхід JavaScript / jQuery

Нарешті, ви можете використовувати плагін, такий як Isotope / Masonry:

Bootstrap Masonry Demo
Masonry Demo 2

Детальніше про стовпці змінної висоти Bootstrap

Оновлення 2018 р.
Усі стовпці мають однакову висоту в Bootstrap 4, оскільки він використовує flexbox за замовчуванням, тому «проблема висоти» не є проблемою. Крім того, Bootstrap 4 включає такий тип багатоколонного рішення: Bootstrap 4 Masonry cards Demo .

Чомусь це працювало для мене без класу .display-flex

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

Я створив ще одне розширення (яке також реагує) для рядка завантаження. Ви можете спробувати щось подібне:

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