Masonry and Bootstrap 3 - 3 列不同尺寸

Question

我已经与 Bootstrap 和 Masonry 斗争了 3-4 多个小时，搜索了大量文章但找不到解决方案。

事情是这样的：

我的 Bootstrap Grid 看起来像这样：

<div class="itemsContainer">
    <div class="col-md-6 item"></div>
    <div class="col-md-3 item"></div>
    <div class="col-md-3 item"></div>
</div>

总共有 12 根柱子，如果没有 Masonry，它就可以完美运行。 但是，一旦我将 Masonry 包括在内，第三列就会下降。

如果我将其设为 6-6 列或 4-4-4 列和 3-3-3-3，它们可以正常工作，但 6-3-3 不起作用。

有人有解决办法吗？任何想法如何拥有这个很酷的布局？我必须实现我的流体网格吗？为什么 Masonry 会与 Bootstrap 中断？

这是一个 JS 小提琴来说明 https://jsfiddle.net/bePolite/52VtD/11921/embedded/result/

Answer 1

需要包含 <div class="row"> 才能正常工作，如您所愿...

<div class="row">
    <div class="itemsContainer">
        <div class="col-md-6 item"></div>
        <div class="col-md-3 item"></div>
        <div class="col-md-3 item"></div>
    </div>
</div>

Answer 2

bootstrap Grid Example

<div class="container">
    <h1>Divs with same col's</h1>
    <div class="row">
        <div class="col-xs-4 bg1"><p class="lead"> i'm div col-xs-4 </p></div>
        <div class="col-xs-4 bg2"><p class="lead"> i'm div col-xs-4 </p></div>
        <div class="col-xs-4 bg3"><p class="lead"> i'm div col-xs-4 </p></div>
    </div>
    <h1>Divs with differents col's</h1>
    <div class="row">
        <div class="col-xs-6 bg1"><p class="lead"> i'm div col-xs-6 </p></div>
        <div class="col-xs-3 bg2"><p class="lead"> i'm div col-xs-3 </p></div>
        <div class="col-xs-3 bg3"><p class="lead"> i'm div col-xs-3 </p></div>
    </div>
</div>

这将显示如下：