Question

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

当调整大小时，具有更多文本的第3个元素具有更长的高度。如何确保所有元素都被强制为与最大元素相同的高度？

Answer 1

这可以通过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

强制段落的高度相同

1 个答案: