在引导程序中自动正确定位12列以上

Question

我有一个在自举网格上显示产品的代码。每个产品使用4列网格，因此每行显示3列。但是，由于它们的高度不同，它们无法正常显示。

实际结果：

<div class="container">
  <div class="row">
    <div class="col-md-4"><div class="well">Random height #1</div></div>
    <div class="col-md-4"><div class="well">Random height #2 <br><br><br><br><br><br></div></div>
    <div class="col-md-4"><div class="well">Random height #3 <br><br><br><br><br></div></div>
    <div class="col-md-4"><div class="well">Random height #4 <br></div></div>
    <div class="col-md-4"><div class="well">Random height #5 <br><br><br><br></div></div>
    <div class="col-md-4"><div class="well">Random height #6 <br><br><br></div></div>
  </div>
</div>

https://jsfiddle.net/a3w0hjx9/

预期结果（使用更多行模拟）：

<div class="container">
  <div class="row">
    <div class="col-md-4"><div class="well">Random height #1</div></div>
    <div class="col-md-4"><div class="well">Random height #2 <br><br><br><br><br><br></div></div>
    <div class="col-md-4"><div class="well">Random height #3 <br><br><br><br><br></div></div>
</div>
<div class="row">
    <div class="col-md-4"><div class="well">Random height #4 <br></div></div>
    <div class="col-md-4"><div class="well">Random height #5 <br><br><br><br></div></div>
    <div class="col-md-4"><div class="well">Random height #6 <br><br><br></div></div>
  </div>
</div>

https://jsfiddle.net/85oewy3f/

如果不必每3个产品添加一行，我怎样才能达到理想的效果？ （由于网站的某些功能，我不能这样做）

Answer 1

当然，最小高度可行，但现在您已经指定了不应该有限制的元素的高度限制。

一个简单的解决方案是利用:nth-child并清除。

.col-md-4:nth-child(3n+4) {
    clear: left;
}

Codepen：codepen.io/hellojason/pen/QNWMOZ

如果您需要更精细的话，那么您可以清除媒体查询的不同:nth-child位置。

Answer 2

你需要在每第三列div之后清除浮动。

.col-md-4:nth-child(3n+4) {
  clear: both;
}

...但实际上你应该使用Bootstrap行。

JSFiddle demo

Answer 3

您可以将每个.col-md-4的高度设置为某个值。详细信息位于fiddle

<强> CSS：

.col-md-4{
  min-height: 200px
}

  

可能对项目有害，所以你可以通过添加来覆盖它   其他课程。