我有一排这样的缩略图:

不过,我希望它们的高度相同。这是我的代码:

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

最佳答案

似乎 bootstrap 4,就像你在示例中展示的那样,用于获得相同的高度,容器 div 的 display: table 和内部的 display: table-cell

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

关于twitter-bootstrap-3 - Bootstrap 3 等高缩略图(如 bootstrap 4 中的等高卡片),我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/40687425/

10-12 20:29