砌体与引导列大小混淆答案

【问题标题】：Masonry messing with bootstrap column size砌体与引导列大小混淆
【发布时间】：2015-07-04 18:30:49
【问题描述】：

我正在尝试用 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">？
你是个翻转天才。这完全有效！
据我所知 - 为什么会解决它/下面有单独的砌体 div 会导致什么？

标签： html css twitter-bootstrap jquery-masonry masonry

【解决方案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关于引导网格系统的好教程。

【讨论】：