砌体和Bootstrap 3 - 3列不同大小

Question

我一直在与Bootstrap和Masonry战斗超过3-4个小时，搜索了大量文章，但找不到解决方案。

这就是事情：

我的Bootstrap网格看起来像这样：

<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，第三栏就会下降。

如果我制作6-6列或4-4-4列和3-3-3-3它们工作正常，但6-3-3不起作用。

有没有人有解决方案？任何想法如何有这个很酷的布局？我必须实施流体网格吗？为什么Masonry打破了Bootstrap？

这是一个用来说明https://jsfiddle.net/bePolite/52VtD/11921/embedded/result/

的JS小提琴

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>

这将显示你喜欢这个：