Html bootstrap-tumblr-like网格系统

我想有一个tumblr一样的网格布局为我的引导网站。（）下面的代码显示了我现在使用的引导网格系统（我猜它不是设计用来做这种事情的）。可惜有些人没有排队。

（您可能必须放大结果面板，因为响应性设计）

我想知道我怎样才能使所有的栏目都显示在上一个栏目的下一个栏目或下一个栏目，而不会像现在这样出现巨大的空白
 首先添加
行
和
列
的父层，并确定要获得最宽屏幕分辨率所需的列数（在本例中为2，因此我们使用
col-md-6
）。然后，为每一列添加另一行，其中包含多个列

<div class="row">
    <div class="col-md-6">
        <div class="row>
             <article class=col-md-12>...</article>
             <article class=col-md-12>...</article>
             <article class=col-md-12>...</article>
        </div>
    </div>
    <div class="col-md-6">
        <div class="row>
             <article class=col-md-12>...</article>
             <article class=col-md-12>...</article>
             <article class=col-md-12>...</article>
        </div>
    </div>
</div>


您可以尝试这样的CSS网格解决方案

.container.page {
 -moz-column-width: 39em;
 -webkit-column-width: 39em;
 -moz-column-gap: .75em;
 -webkit-column-gap: .75em;   
}

.col-sm-6 {
 display: inline-block;
 margin:  0.75rem;
 padding:  .5rem;
 width:  100%; 
 float:none;
}

演示：
或者，您可以使用jquery插件（如Mashine或同位素）来实现这一点：
如果我理解正确，您想去掉每个
之间的边距，对吗？@DrydenLong我想保留边距，但只保留15px的边距。如果你看左边的最后两个
，它们上面和下面都有一些奇怪的间隔，这似乎把顺序搞乱了。我只是在做JSFIDLE时随机复制粘贴了块。
.container.page {
 -moz-column-width: 39em;
 -webkit-column-width: 39em;
 -moz-column-gap: .75em;
 -webkit-column-gap: .75em;   
}

.col-sm-6 {
 display: inline-block;
 margin:  0.75rem;
 padding:  .5rem;
 width:  100%; 
 float:none;
}