bootstrap блоки разной высоты

Please complete the security check to access codepen.io

Why do I have to complete a CAPTCHA?

Completing the CAPTCHA proves you are a human and gives you temporary access to the web property.

What can I do to prevent this in the future?

If you are on a personal connection, like at home, you can run an anti-virus scan on your device to make sure it is not infected with malware.

If you are at an office or shared network, you can ask the network administrator to run a scan across the network looking for misconfigured or infected devices.

Another way to prevent getting this page in the future is to use Privacy Pass. You may need to download version 2.0 now from the Chrome Web Store.

Cloudflare Ray ID: 537d758cde12d729 • Your IP : 78.85.5.224 • Performance & security by Cloudflare

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

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

В настоящее время TWBS поместит следующую строку col-md-4 под самый длинный элемент в предыдущей третьей строке. Таким образом, каждая строка элементов идеально выровнена — пока это потрясающе, я хочу, чтобы каждый элемент падал непосредственно под последним элемент

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

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

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

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

1 — подход ‘clearfix’ (рекомендованный Bootstrap), как это (требуется итерация каждые X столбцов), Это заставит обернуть каждое X число столбцов.

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

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

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

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

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

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

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

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

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

Прошу прощения за мой дилетантский вопрос:

Есть макет сайта вот такого плана:

Все блоки на сайте размещены сеткой, у каждого блока высота равна или x, или 2x, или 3x, ширина тоже — y, или 2y.

Пробую сделать на Bootstrap, но, из-за высоты, бутстрап размещает 4-й блок не под 2-м, а под первым, с новой строки. Пример: https://www.codeply.com/go/dwyEv5gprw

Подскажите, как решить данный вопрос? Заранее спасибо!

Оцените статью