jquery - Bootstrap 将列保持在一起而没有空格

Question

我已经开始使用 bootstrap 构建网站，但遇到了一些问题。 由于图像高度不同，列不会彼此相邻，而是跳到新行。这在两者之间创造了很多空白空间。 所以我希望一切都在一起，没有任何空间。 试过 float :左；position:absolute；清除 float 甚至谷歌搜索但没有找到解决方案。

这是 jsfiddle 链接:Fiddle Here

我的代码

<div class="container-fluid">
<div class="row">
    <div class="col col-sm-12 one"></div>

    <div class="col col-sm-8 two"></div>

    <div class="col col-sm-2 three"></div>
    <div class="col col-sm-2 four"></div>

    <div class="col col-sm-4 five"></div>

    <div class="col col-sm-4 six"></div>

    <div class="col col-sm-4 seven"></div>

    <div class="col col-sm-4 eight"></div>
    <div class="col col-sm-4 nine"></div>


</div>    
</div>

我在 5 分钟前找到了 masonry ( http://masonry.desandro.com/ )，但想和你一起看看是否有更简单的方法。想要使用尽可能少的代码。 你将如何/如何解决这个问题？

Answer 1

在 bootstrap 中，每行最多可以有 12 列，当您使用超过 12 列时，它们将换行。