在引导程序中自动正确定位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,如果您需要更精细,可以清除媒体查询的不同位置.