Question

我有一排像这样的缩略图：

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

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

Answer 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

Answer 2

似乎bootstrap 4，就像你在示例中所示，用于获得相同的高度，容器div为display: table，内层为display: table-cell。

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

Bootstrap 3个相同高度的缩略图（就像bootstrap 4中的高度相同的卡片）

2 个答案: