动态创建不同高度的bootstrap列，向左浮动

Question

考虑使用引导网格系统动态创建并设置样式的未知数量的div。在这个例子中，我使用col-sm-4所以在每隔三个块后，我们移动到一个新行。块（div）可以是不同的高度，这取决于其中的内容。

这是我遇到布局问题的地方。当移动到新行时，我希望第四个块向左浮动。这只发生在上面一行中最左边的div也是最短的时候。我有图片来说明。

现实生活：

梦想：

＆＃34;正确＆＃34;这样做的方法是将每三个人包裹在row课程中，但是我不确定如何使用动态内容（可能会破解它）或者是否有一个简单的css解决方案。

HTML：

<div class="row">
  <div class="col-sm-12">
    <div class="col-sm-4 block">
      <div class="inner-block"></div>
    </div>
    <div class="col-sm-4 block">
      <div class="inner-block"></div>
    </div>
    <div class="col-sm-4 block">
      <div class="inner-block" style="height:150px"></div>
    </div>
    <div class="col-sm-4 block">
      <div class="inner-block"></div>
    </div>
  </div>
</div>

CSS：

.block {
  padding: 5px;
}

.inner-block {
  height: 200px;
  background-color: blue;
}

Plunker Example（将预览展开为适当大小）

Answer 1

如果你的系统无法在每个第n个div上添加第一个/最后一个类，那么你可以使用nth-child css伪选择器。

@media (min-width: 768px) {// For medium displays and above
  .col-sm-4:nth-child(3n+1) { // We target every 3rd div but offset the count by 1 so that that 1st, 4th 7th etc divs are cleared
    clear:both; // Clear the float
  }
}