砖石和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，第三列就会掉下来。

如果我将其设置为6-6列或4-4-4列和3-3-3-3，它们工作得很好，但6-3-3不起作用。

有没有人有解决方案？有什么想法可以让这个很酷的布局呢？我必须实现我的流体网格吗？为什么砖石工程会与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>

这将显示如下所示：

​

​