砌体弄乱自举柱尺寸

Question

我正在尝试使用bootstrap + masonry来实现这种视图：

Bootstrap工作正常 - 如果我在每个4 col-3-md连续显示。问题在于，当我添加砌体时，它们不再尊重它 - 所以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;
}

知道我需要做什么才能使砌体不会改变引导柱的宽度？

Answer 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>

我建议您阅读有关引导网格系统的this精彩教程。