Twitter bootstrap 3 Bootstrap 3等高缩略图（类似于Bootstrap 4中的等高卡）

我有一排这样的缩略图：

不过我希望他们的身高相等。这是我的代码：

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

热键+组合键
热键描述在这里。类别仅显示在explore中

这可能吗？正如我们在bootstrap4中看到的，这里是等高卡：

---

像您在示例中所示，引导程序4似乎用于获得相同的高度，

display:table

用于容器div，而

display:table cell

用于内部单元格

其他解决方案可以使用

代替

，使用

flex

属性…

---

签出此

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

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

只需将

display flex

添加到包含

的行中

。另外，即将推出的Bootstrap4默认使用flexbox，因此将来不需要使用额外的CSS

您还可以使用

---

也看,，

---

谢谢@anfuca，我会尝试一下！谢谢齐姆。我之所以避免使用flex box，是因为浏览器对该功能的支持很弱，不是吗？