Jquery 引导将列保持在一起，而不留空间

我已经开始建立一个网站与引导，但有一些问题。 由于图像高度不同，列不会彼此相邻，而是跳转到新行。这会在两者之间产生大量的空白空间。 所以我希望一切都能在一起，没有任何空间。 尝试过浮动：左；位置：绝对位置；清除浮动，甚至谷歌搜索，但没有找到解决办法

以下是JSFIDLE链接：

我的代码

<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分钟前找到了massy（），但想和你一起看看是否有更简单的方法。希望使用尽可能小的代码。

---

如何解决这个问题？

在引导过程中，当您使用12列以上的列时，每行最多可以有12列，它们将换行。

您试图做的事情是不可能的。不能使用引导网格（COL）并排放置那么多div。您可以创建自己的css并根据需要调整宽度

<div class="container">
   <div class="one col"></div>
   <div class="two col"></div>
   <div class="three col"></div>
   <div class="four col"></div>
   <div class="five col"></div>
   <div class="six col"></div>
   <div class="seven col"></div>
   <div class="eight col"></div>
   <div class="nine col"></div>
</div>

.col {

float:left
}

.one, .three, .five, .seven, .nine {

background-color:red;

height:100px;

width:10%

}

.two, .four, .six, .eight {

background-color:blue;

height:100px;

width:12%

}

上校{
浮动：左
}
.1、.3、.5、.7、.9{
背景色：红色；
高度：100px；
宽度：10%
}
.2、.4、.6、.8{
背景颜色：蓝色；
高度：100px；
宽度：12%
}

---

正如我所提到的，您可以根据需要更改颜色、宽度和高度。

一行最多只能有12列，总共有44列。您使用的是bootsrap类，但随后您完全对它们进行了修改和弯曲，以完成与它们的用途完全不同的操作。停止使用引导列创建墙。或者使用一个墙插件（比如Freewall或者其他什么），或者在自定义CSS中使用它。哦，您可以使用

.col:nth child（1）

，

.col:nth child（2）

@JeremyThille

第n个child

从0开始。不，令人惊讶的是，第n个child从1开始。）