Bootstrap缩略图大小相同

Question

如何强制所有缩略图具有相同的高度？文本是从DB加载的，其中有一些是在一些文件中加载的，而在其他文件中则较少。结果显示在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?