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

В настоящее время у меня есть что-то вроде:

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

Ответ 1

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

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

Примечание. Нижеприведенные параметры применимы для сценариев с колонкой, где есть более 12 единиц единиц в одном .row. Для читателей, которые не понимают, почему бы не было более 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 Demo (один уровень)

Clearfix Demo (реагирующие уровни) - например. col-sm-6 col-md-4 col-lg-3

Существует также изменение только для CSS в 'clearfix'
Очистка только для CSS с таблицами

2 - сделайте колонки одинаковой высоты (используя flexbox):

Поскольку проблема вызвана разницей в высоте, вы можете сделать столбцы равной высотой по каждой строке. Flexbox - лучший способ сделать это и поддерживается в Bootstrap 4...

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

Flexbox равная высота Демо

3 - Un-float столбцы используют встроенный блок вместо.

Опять же, проблема с высотой возникает только потому, что столбцы перемещаются. Другой вариант - установить столбцы на display:inline-block и float:none. Это также обеспечивает большую гибкость для вертикального выравнивания. Тем не менее, с этим решением должно быть без пробелов HTML между столбцами, в противном случае элементы встроенного блока имеют дополнительное пространство и будут завершены преждевременно.

Демо-версия встроенного блока

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

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

Демо-версия Bootstrap 3 с несколькими колонками

5 - Масонство JavaScript/jQuery подход

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

Демо-версия макетщика Bootstrap
Демонстрация масонства 2

Подробнее о столбцах столбцов переменной высоты загрузки

Обновление 2018
Все столбцы равны по высоте в Bootstrap 4, потому что по умолчанию используется Flexbox, поэтому проблема с высотой не является проблемой. Кроме того, Bootstrap 4 включает в себя такое решение с несколькими столбцами: Bootstrap 4 Демографические карты для демонстрации кладовки.

Ответ 2

По какой-то причине это сработало для меня без класса .display-flex

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

Ответ 3

Сумма col внутри загрузочного лотка должна быть каждый раз 12. Это будет поддерживать чистый дизайн сетки:

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