<分区>
<分区>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container col-md-6 col-md-offset-3">
<div class="row-fluid">
<ul class="thumbnails list-inline">
<li class="col-md-4">
<div class="thumbnail">
<img src="http://placehold.it/260x180" alt="" class="img-rounded">
<div class="caption">
<h3>Thumbnail label</h3>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
<p><a href="images#" class="btn btn-primary">Action</a> <a href="images#" class="btn">Action</a></p>
</div>
</div>
</li>
<li class="col-md-4">
<div class="thumbnail">
<img src="http://placehold.it/260x180" alt="" class="img-rounded">
<div class="caption">
<h3>Thumbnail label</h3>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
<p><a href="images#" class="btn btn-primary">Action</a> <a href="images#" class="btn">Action</a></p>
</div>
</div>
</li>
<li class="col-md-4">
<div class="thumbnail">
<img src="http://placehold.it/260x180" alt="" class="img-rounded">
<div class="caption">
<h3>Thumbnail label</h3>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
<p><a href="images#" class="btn btn-primary">Action</a> <a href="images#" class="btn">Action</a></p>
</div>
</div>
</li>
</ul>
</div>
</div>当调整大小时，文本比其他元素多的第三个元素具有更长的高度。如何确保所有元素都强制与最大元素高度相同？
最佳答案
这可以通过 flexbox 实现:
ul.thumbnails {
display: flex;
flex-flow: row nowrap;
align-items: stretch;
}
注意，这里只是为了说明原理；您可能希望调整此代码以适应您现有的样式表。
我建议您阅读 CSS flexbox。 css-tricks.com 和 MDN 上有一些非常好的指南:
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox
关于html - 强制段落高度相同，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49515879/
相关文章：
html - 从 Bootstrap 导航栏中删除左填充并保持正确的响应行为
javascript - 只放代码就可以多次显示一段Text
css - radio 输入(按钮)开关/切换样式不适用于 IE
javascript - 如何在不呈现克拉和标签名称的情况下呈现 <select> 标签
html - 我可以为所有视口(viewport)编写 col-xs-12 吗？
javascript - 向后导航时，Bootstrap 词缀不起作用
<li> 标签内的 HTML/CSS <ul> 标签 - 周围的元素会移动
css - jquery tools Overlay CSS Conflict, Image positioned under the overlay 冲突