Это популярный вопрос 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.
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 - Удалите плавающие столбцы, вместо этого используйте встроенный блок ..
Опять же, проблема с высотой возникает только потому, что столбцы перемещаются. Другой вариант - установить для столбцов значения 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;}
источник