动态创建具有不同高度的引导列，向左浮动

Question

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

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

现实生活：

梦想：

执行此操作的“正确”方法是将每三个包装在我相信的 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
  }
}