twitter-bootstrap Bootstrap 缩略图大小相同
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/42792108/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap thumbnails same size
提问by jarosik
How to force all thumbnails to have the same height? Text is loaded from DB and there is more of it in some, and less in others. The result is shown on a PrtScr.
I would like to keep them responsive and same relative size. Should I add white space/trim text or have some sort of container inside? I don't know if this makes sense and how to approach this problem
如何强制所有缩略图具有相同的高度？文本是从数据库加载的，有些文本较多，而另一些文本较少。结果显示在 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>
I have this code from here:
我从这里有这个代码：
http://bootsnipp.com/snippets/featured/thumbnail-with-caption-amp-buttons
http://bootsnipp.com/snippets/featured/thumbnail-with-caption-amp-buttons
回答by Zim
I think the best way is flexbox:
我认为最好的方法是flexbox：
.row.display-flex {
display: flex;
flex-wrap: wrap;
}
.thumbnail {
height: 100%;
}
Just add display-flexto the containing row. Also, the upcoming Bootstrap 4 will include flexbox so this extra CSS won't be necessary in the future.
只需添加display-flex到包含row. 此外，即将推出的 Bootstrap 4 将包含 flexbox，因此将来不需要这个额外的 CSS。
You can also do more with the position of child elements.
Option 2
选项 2
Another option (if the images are all the same size), would be to truncate potentially longer text that may wrap. This way the content is the same height in each thumbnail. Although in your case the text looks multiline so this may not work.
另一种选择（如果图像大小相同）是截断可能会换行的较长文本。这样，每个缩略图中的内容高度相同。尽管在您的情况下，文本看起来是多行的，因此这可能不起作用。
.thumbnail p, .thumbnail h4 {
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
Also see, How can I make Bootstrap columns all the same height?
另请参阅， 如何使 Bootstrap 列的高度都相同？
