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

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

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

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

<div class="menu row">
    <div class="menu-category list-group col-lg-3 col-md-4 col-sm-6 col-xs-12">
        <div class="menu-category-name list-group-item active">Category</div><a href="#" class="menu-item list-group-item">Lorem ipsum.<span class="badge">€ 0.00</span></a>
        <a href="#" class="menu-item list-group-item">Lorem ipsum.<span class="badge">€ 0.00</span></a>
        <a href="#" class="menu-item list-group-item">Lorem ipsum.<span class="badge">€ 0.00</span></a>
        <a href="#" class="menu-item list-group-item">Lorem ipsum.<span class="badge">€ 0.00</span></a>
        <a href="#" class="menu-item list-group-item">Lorem ipsum.<span class="badge">€ 0.00</span></a>
        <a href="#" class="menu-item list-group-item">Lorem ipsum.<span class="badge">€ 0.00</span></a>
        <a href="#" class="menu-item list-group-item">Lorem ipsum.<span class="badge">€ 0.00</span></a>
    </div>

    <div class="menu-category list-group col-lg-3 col-md-4 col-sm-6 col-xs-12">
        <div class="menu-category-name list-group-item active">Category</div><a href="#" class="menu-item list-group-item">Lorem ipsum.<span class="badge">€ 0.00</span></a>
        <a href="#" class="menu-item list-group-item">Lorem ipsum.<span class="badge">€ 0.00</span></a>
        <a href="#" class="menu-item list-group-item">Lorem ipsum.<span class="badge">€ 0.00</span></a>
        <a href="#" class="menu-item list-group-item">Lorem ipsum.<span class="badge">€ 0.00</span></a>
    </div>

    <div class="menu-category list-group col-lg-3 col-md-4 col-sm-6 col-xs-12">
        <div class="menu-category-name list-group-item active">Category</div><a href="#" class="menu-item list-group-item">Lorem ipsum.<span class="badge">€ 0.00</span></a>
        <a href="#" class="menu-item list-group-item">Lorem ipsum.<span class="badge">€ 0.00</span></a>
        <a href="#" class="menu-item list-group-item">Lorem ipsum.<span class="badge">€ 0.00</span></a>
        <a href="#" class="menu-item list-group-item">Lorem ipsum.<span class="badge">€ 0.00</span></a>
        <a href="#" class="menu-item list-group-item">Lorem ipsum.<span class="badge">€ 0.00</span></a>
    </div>

    <div class="menu-category list-group col-lg-3 col-md-4 col-sm-6 col-xs-12">
        <div class="menu-category-name list-group-item active">Category</div><a href="#" class="menu-item list-group-item">Lorem ipsum.<span class="badge">€ 0.00</span></a>
        <a href="#" class="menu-item list-group-item">Lorem ipsum.<span class="badge">€ 0.00</span></a>
        <a href="#" class="menu-item list-group-item">Lorem ipsum.<span class="badge">€ 0.00</span></a>
        <a href="#" class="menu-item list-group-item">Lorem ipsum.<span class="badge">€ 0.00</span></a>
        <a href="#" class="menu-item list-group-item">Lorem ipsum.<span class="badge">€ 0.00</span></a>
        <a href="#" class="menu-item list-group-item">Lorem ipsum.<span class="badge">€ 0.00</span></a>
        <a href="#" class="menu-item list-group-item">Lorem ipsum.<span class="badge">€ 0.00</span></a>
        <a href="#" class="menu-item list-group-item">Lorem ipsum.<span class="badge">€ 0.00</span></a>
    </div>

    <div class="menu-category list-group col-lg-3 col-md-4 col-sm-6 col-xs-12">
        <div class="menu-category-name list-group-item active">Category</div><a href="#" class="menu-item list-group-item">Lorem ipsum.<span class="badge">€ 0.00</span></a>
        <a href="#" class="menu-item list-group-item">Lorem ipsum.<span class="badge">€ 0.00</span></a>
        <a href="#" class="menu-item list-group-item">Lorem ipsum.<span class="badge">€ 0.00</span></a>
    </div>
</div>

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

Спасибо!

Ответ 1

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

Макетный макет только с CSS

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

http://bootply.com/85737

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

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

Подробнее о решении проблемы с разными высотами

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

Ответ 2

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

<!-- This will clear the float in Middle and Large Size screens only -->
<div class="clearfix visible-md visible-lg"></div>

<!-- This will clear the float in Small Size screens only -->
<div class="clearfix visible-sm"></div>

См. ссылку: в Bootstrap 3

Ответ 3

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

<div class="grid-container">
    <div class="sub-grid">....</div>
    <div class="sub-grid">....</div>
    <div class="sub-grid">....</div>
</div>


.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%;}

demo http://teknosains.com/

Ответ 4

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

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

<div class="row the-list">
    <div class="col-lg-3 col-md-4 col-sm-6 box">...</div>
    <div class="col-lg-3 col-md-4 col-sm-6 box">...</div>
    <div class="col-lg-3 col-md-4 col-sm-6 box">...</div>
</div>

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

<div class="row the-list">
    <div class="col-lg-3 col-md-4 col-sm-6 box">...</div>
    <div class="box-wrap clearfix"></div>
    <div class="col-lg-3 col-md-4 col-sm-6 box">...</div>
    <div class="box-wrap clearfix"></div>
    <div class="col-lg-3 col-md-4 col-sm-6 box">...</div>
    <div class="box-wrap clearfix"></div>
</div>

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

$('<div class="box-wrap clearfix"></div>').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;
    }
}

Обратите внимание, что при выполнении "reset новых строк" правило составляет .row.the-list .box-wrap и имеет начало ".row" в начале, так что это правило будет предшествовать display: block; правил перед ним.

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