Bootstrap 3 等高缩略图（如 bootstrap 4 中的等高卡片）答案

【问题标题】：Bootstrap 3 equal height thumbnails (like equal height cards in bootstrap 4)Bootstrap 3 等高缩略图（如 bootstrap 4 中的等高卡片）
【发布时间】：2017-04-02 21:57:55
【问题描述】：

我有一排这样的缩略图：

我希望它们的高度相同。这是我的代码：

<div class="row text-center">
    <div class="col-md-3 col-sm-6">
        <div class="thumbnail">
            <div class="caption">
                <h3>HOTKEY + COMBO</h3>
                <p>Hotkey description goes here. Category only shown in explore.</p>
                <p>
                    <a href="#" class="btn btn-default" data-tooltip="Change Hotkey">
                </p>
            </div>
        </div>
    </div>
    <div class="col-md-3 col-sm-6">
        <div class="thumbnail">
            <div class="caption">
                <h3>HOTKEY + COMBO</h3>
                <p>short desc</p>
                <p>
                    <a href="#" class="btn btn-default" data-tooltip="Change Hotkey">
                </p>
            </div>
        </div>
    </div>
    <div class="col-md-3 col-sm-6 hotkey-add">
        <div class="thumbnail">
            <div class="caption">
                <p></p>
                <p><a href="#" class="btn btn-default"><span class="glyphicon glyphicon-plus"></span></a></p>
            </div>
        </div>
    </div>
</div>

这可能吗？就像我们在 bootstrap4 中看到的一样，这里是等高卡片：

http://www.codeply.com/render/KrUO8QpyXP#

【问题讨论】：

标签： twitter-bootstrap-3 twitter-bootstrap-4

【解决方案1】：

我知道我在这方面有点晚了，但我认为最好的方法是 flexbox。以下是它在 Bootstrap 3 中的工作方式：

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

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

Thumbnails with flexbox

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

另请参阅， make Bootstrap columns all the same height

【讨论】：

感谢 Zim。我避免使用 flex box 是因为浏览器对此功能的支持很弱，不是吗？

【解决方案2】：

似乎引导程序 4，就像您在示例中显示的那样，用于获得相同的高度，display: table 用于容器 div，display: table-cell 用于内部。

其他解决方案可以使用<table> 代替<div>，使用flex 属性...
看看这个How can I make Bootstrap columns all the same height?

【讨论】：

谢谢@anfuca，我会试试这个！