Строка начальной загрузки со столбцами разной высоты

У меня сейчас что-то вроде:

<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под самым длинным элементом в предыдущей третьей строке. Таким образом, каждая строка элементов идеально выровнена и выровнена - хотя это здорово, я хочу, чтобы каждый элемент попадал непосредственно под последний элемент (макет «Masonry» )

Это популярный вопрос Bootstrap, поэтому я обновил и расширил ответ для Bootstrap 3 и Bootstrap 4 ...

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

Примечание . Приведенные ниже параметры применимы для сценариев переноса столбцов, когда в одном .rowстолбце содержится более 12 единиц столбцов . Для читателей, которые не понимают, почему в строке может быть больше 12 столбцов , или думают, что решение состоит в том, чтобы «использовать отдельные строки», должны сначала прочитать это

Есть несколько способов исправить это ... (обновлено для 2018 г.)

1 - Подобный подход «clearfix» ( рекомендованный 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 Demo (адаптивные уровни) - например.col-sm-6 col-md-4 col-lg-3

Существует также вариант 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 столбцов (решение типа Masonry / Pinterest).

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

Демо Bootstrap 3 с несколькими столбцами

5 - Подход Masonry JavaScript / jQuery

Наконец, вы можете использовать такой плагин, как Isotope / Masonry:

Bootstrap Masonry Demo Демо- версия
Masonry 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;}