我想为我的bootstrap网站提供类似tumblr的网格布局。 （example）下面的代码显示了我现在使用引导程序的网格系统（我的猜测是它不是为了做这样的事情）。太糟糕了一些不排队。
<article class="col-md-6">
<blockquote class="panel panel-default">
<div class="panel-body">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean odio turpis, elementum ut
fermentum nec, pulvinar in lectus. Suspendisse potenti. Cras quis sem sit amet lectus consectetur
venenatis. Donec aliquam leovenenatis. Donec aliquam leo mi, vel fringilla purus commodo eget. Vivamus sit amet sapien sed
mauris sodales ultrices vitae eget nisl. Nulla malesuada rhoncus mauris. Praesent vestibulum
auctor lorem mollis ornare.venenatis. Donec aliquam leo mi, vel fringilla purus commodo eget. Vivamus sit amet sapien sed
mauris sodales ultrices vitae eget nisl. Nulla malesuada rhoncus mauris. Praesent vestibulum
auctor lorem mollis ornare. mi, vel fringilla purus commodo eget. Vivamus sit amet sapien sed
mauris sodales ultrices vitae eget nisl. Nulla malesuada rhoncus mauris. Praesent vestibulum
auctor lorem mollis ornare.
</p>
<footer class="text-right">
#1 — Maandag 20 januari 2014 — <cite>X</cite>
</footer>
</div>
</blockquote>
</article>
<article class="col-md-6">
<blockquote class="panel panel-default">
<div class="panel-body">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean odio turpis, elementum ut lor sit amet, consectetur adipiscing elit. Aenean odio turpis, elementum ut
fermentum nec, pulvinlor sit amet, consectetur adipiscing elit. Aenean odio turpis, elementum ut
fermentum nec, pulvinlor sit amet, consectetur adipiscing elit. Aenean odio turpis, elementum ut
fermentum nec, pulvin
fermentum nec, pulvinar in lectus. Suspendisse potenti. Cras quis sem sit amet lectus consectetur
venenatis. Donec
</p>
<footer class="text-right">
#1 — Maandag 20 januari 2014 — <cite>X</cite>
</footer>
</div>
</blockquote>
</article>
<article class="col-md-6">
<blockquote class="panel panel-default">
<div class="panel-body">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean odio turpis, elementum ut
fermentum nec, pulvinar in lectus. Suspendisse potenti. Cras quis sem sit amet lectus consectetur
venenatis. Donec um dolor sit amet, consectetur adipiscing elit. Aenean odio turpis, elementum ut
fermentum nec, pulvinar in lectus. Suspendisse potenti. Cras quis sem sit amet lectus consectetur
venenatis. Donec
</p>
<footer class="text-right">
#1 — Maandag 20 januari 2014 — <cite>X</cite>
</footer>
</div>
</blockquote>
</article>
<article class="col-md-6">
<blockquote class="panel panel-default">
<div class="panel-body">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean odio turpis, elementum ut
fermentum nec, pulvinar in lectus. Suspendisse potenti. Cras quis sem sit amet lectus consectetur
venenatis. Donec
</p>
<footer class="text-right">
#1 — Maandag 20 januari 2014 — <cite>X</cite>
</footer>
</div>
</blockquote>
</article>
<article class="col-md-6">
<blockquote class="panel panel-default">
<div class="panel-body">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean odio turpis, elementum ut
fermentum nec, pulvinar in lectus. Suspendisse potenti. Cras quis sem sit amet lectus consectetur
venenatis. Donec aliquam leo mi, vel fringilla purus commodo eget. Vivamus sit amet sapien sed
mauris sodales ultrices vitae eget nisl. Nulla malesuada rhoncus mauris. Praesent vestibulum
auctor lorem mollis ornare.venenatis. Donec aliquam leo mi, vel fringilla purus commodo eget. Vivamus sit amet sapien sed
mauris sodales ultrices vitae eget nisl. Nulla malesuada rhoncus mauris. Praesent vestibulum
auctor lorem mollis ornare.
</p>
<footer class="text-right">
#1 — Maandag 20 januari 2014 — <cite>X</cite>
</footer>
</div>
</blockquote>
</article>
<article class="col-md-6">
<blockquote class="panel panel-default">
<div class="panel-body">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean odio turpis, elementum ut
fermentum ne
</p>
<footer class="text-right">
#1 — Maandag 20 januari 2014 — <cite>X</cite>
</footer>
</div>
</blockquote>
</article>
JSfidle（您可能需要放大“结果”面板，因为响应式设计）
我想知道如何让所有列显示在前一个列的下方或下方，而没有像现在这样的巨大空白。
答案 0 :(得分：2)
首先添加row和col的父图层，并确定最宽屏幕分辨率所需的列数（在本例中为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>
所以基本上你将子行用作父列的列。我希望这是有道理的。
我已更新了您的jsfiddle
另外供参考，here's the Bootstrap documentation关于网格。
修改 如果你想在Tumblr上这样做，那么你需要加载Masonry。使用Masonry，您的标记可以正常工作。
答案 1 :(得分：0)
您可以尝试这样的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插件（如砌体或同位素）完成此操作：http://bootply.com/99910