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

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示例(将预览扩展到适当的大小)

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
  }
}