砌体搞乱 bootstrap 列大小

Question

我正在尝试通过 bootstrap + masonry:

实现这种视图

Bootstrap 工作正常 - 如果我在每个中执行 col-3-md 然后连续显示 4 个。问题是，当我添加砖石结构时，他们不再尊重它 - 所以 col-3-md 开始连续出现 3 个，第 4 个应该是空白点。

很正常 bootstrap 看起来像这样：

然后当我添加 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;
}

知道我需要做什么才能使砌体不会改变 bootstrap 列的宽度吗？

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 关于 bootstrap 网格系统的精彩教程。

砌体搞乱 bootstrap 列大小

Masonry messing with bootstrap column size

html

css

twitter-bootstrap

jquery-masonry

masonry