Я пытаюсь добиться такого вида с помощью 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;
}
Любая идея, что мне нужно сделать, чтобы кладка не меняла ширину столбцов начальной загрузки?
<div id="masonry-container" class="row">
? - person aleksandar   schedule 04.07.2015