Bootstrap: как складывать divs разной высоты?

Этот вопрос немного похож на этот , но я хочу знать, есть ли чистое решение CSS, совместимое с Bootstrap.

В принципе, у меня есть следующий макет:

введите описание изображения здесь

Это HTML этой страницы:

 

Проблема заключается в том, что, как видите, система строк Bootstrap здесь немного неудобна. Я хочу, чтобы эти категории складывались наиболее оптимальным образом. Поэтому мой вопрос: как я могу это сделать с помощью CSS? Плагин масонства кажется отличным, но я хотел бы сохранить его для плана B.

Благодаря!

Взгляните на эти примеры.

Макет в стиле макета ТОЛЬКО с CSS

Применительно к вашей list-group Bootstrap это выглядело бы примерно так.

http://bootply.com/85737

Тем не менее, вам нужно удалить classы Bootstrap col-* из вашей разметки, так как они используют поплавки в беспорядке макета. Используйте *-column-width для изменения ширины панелей. Таким образом, это возможно с чистым CSS, но не совместимым с кросс-браузером, поэтому вы все равно можете использовать плагин Masonry в качестве резервной копии.

Если вы просто хотите, чтобы столбцы обернули каждый столбец x , используйте Bootstrap отзывчивые сбрасывания или решение clearfix со средствами массовой информации, например: http://www.codeply.com/go/jXuoGHHker

Подробнее о решении разной высоты

UPDATE Bootstrap 4 будет включать в себя опцию макета кластера в столбце CSS .

Лучше использовать .visible-sm, .visible-md, .visible-lg с classами clearfix. Это также помогает очищать поплавки в соответствии с размерами экрана.

  

См. Ссылку: на Bootstrap 3

Вы можете попробовать это

 
....
....
....
.grid-container{ -moz-column-count:2; -moz-column-gap:10px; -webkit-column-count:2; -webkit-column-gap:10px; column-count: 2; column-gap: 10px; } .sub-grid{display: inline-block;width: 100%;}

демо http://teknosains.com/

Мое решение основано на ответе @ ashish-kumar

У меня есть предметы в форме коробки, как показано ниже.

 
...
...
...

Хитрость заключается в том, чтобы добавить clearfix div после каждого элемента «.box», например

 
...
...
...

Это может быть достигнуто с помощью jQuery

 $('
').insertAfter('.box');

Теперь, используя css, я сделал «.clearfix» после каждого 2-го / 3-го / 4-го ящиков (в зависимости от текущего размера экрана).

 /* hide all new lines by default */ .the-list .box-wrap { display: none; } /* Small devices (tablets, 768px and up) */ @media (min-width: 768px) { /* reset new lines */ .row.the-list .box-wrap { display: none; } /* new line every 2nd box */ .the-list .box-wrap:nth-child(4n) { display: block; } } /* Medium devices (desktops, 992px and up) */ @media (min-width: 992px) { /* reset new lines */ .row.the-list .box-wrap { display: none; } /* new line every 3rd box */ .the-list .box-wrap:nth-child(6n) { display: block; } } /* Large devices (large desktops, 1200px and up) */ @media (min-width: 1200px) { /* reset new lines */ .row.the-list .box-wrap { display: none; } /* new line every 4th box */ .the-list .box-wrap:nth-child(8n) { display: block; } } 

Обратите внимание, что при выполнении «перезагрузки новых строк» ​​правило – это .row.the-list .box-wrap и имеет «.row» в начале, так что это правило будет предшествовать display: block; правил перед ним.

Живой пример, см. Сайт All Escape Rooms UK

  • Bootstrap 3 - просмотр рабочего стола на мобильном устройстве
  • Изменение значка Twitter-загрузки 3.0 при крахе
  • Выпадающее меню выпадающего списка Bootstrap отсутствует
  • Система Bootstrap Grid System не выглядит красивой
  • Bootstrap 3 - Как загрузить контент в модальном теле через AJAX?
  • Bootstrap изменяет порядок div с помощью pull-right, pull-left на 3 столбца
  • Сохранять раскрывающееся окно Bootstrap при нажатии
  • Bootstrap 3 не может правильно отобразить глификон
  • Связывание для свертывания события в Twitter Загрузочный файл 3
  • Bootstrap 3 точки останова и медиа-запросы
  • Как изменить начальный цвет начальной загрузки?
  • Давайте будем гением компьютера.