Bootstrap缩略图相同大小[重复]

Question

如何强制所有缩略图具有相同的高度？文本是从数据库中加载的，其中一些内容较多，而另一些内容较少。结果显示在 PrtScr 上。 我想让它们保持响应和相同的相对大小。我应该添加空格/修剪文本还是里面有某种容器？我不知道这是否有意义以及如何解决这个问题

   <div class="col-xs-18 col-sm-6 col-md-3">
      <div class="thumbnail">
        <img src="http://placehold.it/500x300" alt=""/>
          <div class="caption">
            <h4 th:text="${game.title}"/>
            <p th:text="${game.shortDescription}"/>


            <a href="#" class="btn btn-info btn-xs" role="button">Details</a> 
            <a href="#" class="btn btn-default btn-xs" role="button">Info</a>

        </div>
      </div>
    </div>

我从这里得到这个代码：

http://bootsnipp.com/snippets/featured/thumbnail-with-caption-amp-buttons

Answer 1

我认为最好的方法是flexbox：

.row.display-flex {
  display: flex;
  flex-wrap: wrap;
}
.thumbnail {
  height: 100%;
}

只需将display-flex 添加到包含row 即可。此外，即将推出的 Bootstrap 4 将包含 flexbox，因此将来不需要这些额外的 CSS。

Thumbnails with flexbox demo

您还可以使用position of child elements 做更多事情。

选项 2

另一种选择（如果图像都是相同大小），将截断可能会换行的可能较长的文本。这样，每个缩略图中的内容高度相同。尽管在您的情况下，文本看起来是多行的，所以这可能不起作用。

.thumbnail p, .thumbnail h4 {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

Thumbnails with ellipsis text

---

另请参阅， How can I make Bootstrap columns all the same height?