it-swarm.com.ru

Загрузочный ряд с колоннами разной высоты

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

<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») раскладка)

54
user3379926

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

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

 Bootstrap uneven wrapping columns

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


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

1 - Подход 'clearfix') ( рекомендуется Bootstrap ) примерно так (требуется итерация через каждый X столбец). Это приведет к переносу каждого X количества столбцов ...

 enter image description here

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

 enter image description here

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

Flexbox равной высоты Demo


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

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

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


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

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

Bootstrap 3 мультиколонки Демо

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

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

Bootstrap Masonry Demo
Masonry Demo 2


Подробнее о Bootstrap Колонки переменной высоты


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

101
Zim

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

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

Я создал другое расширение (которое также является реактивным) для строки начальной загрузки. Вы можете попробовать что-то вроде этого:

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

0
Akash Yellappa

Сумма col в начальной загрузке Twitter должна быть каждый раз 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>
0
Christian Michael