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）：我可以在“row”类中包装三个div，然后它在普通屏幕上工作，但在较小的设备上，第二行只包含一列。

知道如何继续吗？

Answer 1

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

以下片段：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

一个JS解决方案是获取缩略图容器的最大高度，然后将此最大高度设置为所有缩略图容器。以下代码片段需要jQuery。

<script>
var maxHeight = 0;
$('.thumbnail').each(function () {
  var height = $(this).height();
  if (height > maxHeight){
     maxHeight = height;
  }
});
$('.thumbnail').height(maxHeight);
</script>

Bootstrap：如何使列等于每行的高度/动态列数，具体取决于设备大小

2 个答案: