html - Bootstrap : How to make columns equal height/dynamic amount of columns per row depending on device size

Question

我基本上从 Purity III joomla 模板中获取了这段代码:

<div class="container">
<div class="col-sm-6 col-md-4">
<div class="thumbnail"><img alt="Sample image" src="/images/joomlart/corporate/staff-1.jpg" class="img-circle">
<div class="caption">
<h3>Sean Thomas</h3>
<p>Senior Designer</p>
<p></p>
</div>
</div>
</div>
<div class="col-sm-6 col-md-4">
<div class="thumbnail"><img alt="Sample image" src="/images/joomlart/corporate/staff-1.jpg" class="img-circle">
<div class="caption">
<h3>Sean Thomas</h3>
<p>Senior Designer</p>
<p></p>
</div>
</div>
</div>
<div class="col-sm-6 col-md-4">
<div class="thumbnail"><img alt="Sample image" src="/images/joomlart/corporate/staff-1.jpg" class="img-circle">
<div class="caption">
<h3>Sean Thomas</h3>
<p>Senior Designer</p>
<p></p>
</div>
</div>
</div>
<div class="col-sm-6 col-md-4">
<div class="thumbnail"><img alt="Sample image" src="/images/joomlart/corporate/staff-1.jpg" class="img-circle">
<div class="caption">
<h3>Sean Thomas</h3>
<p>Senior Designer</p>
<p></p>
</div>
</div>
</div>
<div class="col-sm-6 col-md-4">
<div class="thumbnail"><img alt="Sample image" src="/images/joomlart/corporate/staff-1.jpg" class="img-circle">
<div class="caption">
<h3>Sean Thomas</h3>
<p>Senior Designer</p>
<p></p>
</div>
</div>
</div>
<div class="col-sm-6 col-md-4">
<div class="thumbnail"><img alt="Sample image" src="/images/joomlart/corporate/staff-1.jpg" class="img-circle">
<div class="caption">
<h3>Sean Thomas</h3>
<p>Senior Designer</p>
<p></p>
</div>
</div>
</div>
</div>

这是正常工作的:普通设备上每行三列 ( http://www.bootply.com/SN4RsM0gtI ) 以及较小屏幕上的两列。

当一个 DIV 高于其他 DIV ( http://www.bootply.com/lRDhpndazO ) 时，问题就出现了: 我可以将三个 div 包装在一个“行”类中，然后它可以在普通屏幕上工作，但在较小的设备上，第二行将只包含一列。

知道如何继续吗？

Answer 1

为容器使用了 flexbox 并稍微编辑了 html。希望这对你有用，请给我你的反馈。谢谢!

下面的片段:

.container {
  display: flex;
  flex-wrap: wrap;
}
.container .thumbnail {
  margin: 5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


<div class="container">
  <div class="col-sm-6 col-md-4 thumbnail">
    <img alt="Sample image" src="/images/joomlart/corporate/staff-1.jpg" class="img-circle">
    <div class="caption">
      <h3>Sean Thomas</h3>
      <p>Senior Designer</p>
      <p></p>
    </div>
  </div>
  <div class="col-sm-6 col-md-4 thumbnail">
    <img alt="Sample image" src="/images/joomlart/corporate/staff-1.jpg" class="img-circle">
    <div class="caption">
      <h3>Sean Thomas</h3>
      <p>Senior Designer</p>
      <p>content</p>
      <p>content</p>
      <p>content</p>
      <p>content</p>
      <p>content</p>
    </div>
  </div>
  <div class="col-sm-6 col-md-4 thumbnail">
    <img alt="Sample image" src="/images/joomlart/corporate/staff-1.jpg" class="img-circle">
    <div class="caption">
      <h3>Sean Thomas</h3>
      <p>Senior Designer</p>
      <p></p>
    </div>
  </div>
  <div class="col-sm-6 col-md-4 thumbnail">
    <img alt="Sample image" src="/images/joomlart/corporate/staff-1.jpg" class="img-circle">
    <div class="caption">
      <h3>Sean Thomas</h3>
      <p>Senior Designer</p>
      <p></p>
    </div>
  </div>
  <div class="col-sm-6 col-md-4 thumbnail">
    <img alt="Sample image" src="/images/joomlart/corporate/staff-1.jpg" class="img-circle">
    <div class="caption">
      <h3>Sean Thomas</h3>
      <p>Senior Designer</p>
      <p></p>
    </div>
  </div>
  <div class="col-sm-6 col-md-4 thumbnail">
    <img alt="Sample image" src="/images/joomlart/corporate/staff-1.jpg" class="img-circle">
    <div class="caption">
      <h3>Sean Thomas</h3>
      <p>Senior Designer</p>
      <p></p>
    </div>
  </div>
</div>