Masonry возится с размером столбца начальной загрузки

Я пытаюсь добиться такого вида с помощью bootstrap + masonry:

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

Bootstrap работает нормально - если я делаю col-3-md в каждом, то 4 отображаются подряд. Проблема в том, что когда я добавляю каменную кладку, они больше не соблюдают это, поэтому col-3-md начинает отображаться с 3 в ряду с пустым местом, где должно быть 4-е.

Итак, обычный бутстрап выглядит так: введите здесь описание изображения

Затем, когда я добавляю Masonry, это выглядит так: введите здесь описание изображения

Вот мой html:

<div class="row">
    <!-- regular bootstrap -->
    <div class="item border col-lg-3 col-md-4 col-sm-3 col-xs-12 height-medium"></div>
    <div class="item border col-lg-3 col-md-4 col-sm-3 col-xs-12 height-medium"></div>
    <div class="item border col-lg-3 col-md-4 col-sm-3 col-xs-12 height-medium"></div>
    <div class="item border col-lg-3 col-md-4 col-sm-3 col-xs-12 height-large"></div>
    <div class="item border col-lg-3 col-md-4 col-sm-3 col-xs-12 height-medium"></div>
    <div class="item border col-lg-3 col-md-4 col-sm-3 col-xs-12 height-large"></div>

    <!-- masonry + bootstrap -->
    <div id="masonry-container">
        <div class="item border col-lg-3 col-md-4 col-sm-3 col-xs-12 height-medium"></div>
        <div class="item border col-lg-3 col-md-4 col-sm-3 col-xs-12 height-medium"></div>
        <div class="item border col-lg-3 col-md-4 col-sm-3 col-xs-12 height-medium"></div>
        <div class="item border col-lg-3 col-md-4 col-sm-3 col-xs-12 height-large"></div>
        <div class="item border col-lg-3 col-md-4 col-sm-3 col-xs-12 height-medium"></div>
        <div class="item border col-lg-3 col-md-4 col-sm-3 col-xs-12 height-large"></div>
    </div>
</div>

Как я добавляю кладку:

$(document).ready ->
  $('#masonry-container').masonry
    itemSelector: '.item'
  return

И CSS:

.border {
    border: 1px solid #C7C5C5;
}

.height-short {
    height: 8em;
}

.height-medium {
    height: 16em;
}

.height-large {
    height: 20em;
}

Любая идея, что мне нужно сделать, чтобы кладка не меняла ширину столбцов начальной загрузки?


person Tom Hammond    schedule 04.07.2015    source источник
comment
Вы пробовали это: <div id="masonry-container" class="row"> ?   -  person aleksandar    schedule 04.07.2015
comment
ты гений-перевертыш. это полностью сработало!   -  person Tom Hammond    schedule 04.07.2015
comment
Просто для моего сведения - почему это решило это / что может вызвать отдельный div каменной кладки?   -  person Tom Hammond    schedule 04.07.2015


Ответы (1)


Столбцы Bootstrap должны быть вложены внутрь row div, чтобы иметь правильные отступы и ширину.
Таким образом, код должен выглядеть примерно так:

<!-- masonry + bootstrap -->
<div id="masonry-container" class="row">
    <div class="item border col-lg-3 col-md-4 col-sm-3 col-xs-12 height-medium"></div>
    <div class="item border col-lg-3 col-md-4 col-sm-3 col-xs-12 height-medium"></div>
    <div class="item border col-lg-3 col-md-4 col-sm-3 col-xs-12 height-medium"></div>
    <div class="item border col-lg-3 col-md-4 col-sm-3 col-xs-12 height-large"></div>
    <div class="item border col-lg-3 col-md-4 col-sm-3 col-xs-12 height-medium"></div>
    <div class="item border col-lg-3 col-md-4 col-sm-3 col-xs-12 height-large"></div>
</div>

Я предлагаю вам прочитать это хорошее руководство по системе сетки bootstrap.

person aleksandar    schedule 04.07.2015