Bootstrap 3等高缩略图(如Bootstrap 4中的等高卡) [英] Bootstrap 3 equal height thumbnails (like equal height cards in 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>

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

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

解决方案

似乎您在示例中所示的引导程序4正在使用相同的高度，容器div为display: table，容器为display: table-cell内部的.

其他解决方案可以使用<table>而不是<div>，并使用flex属性...
检出此如何使Bootstrap列都具有相同的高度?

I have a row of thumbnails like this:

I want them to be equal height though. This is my code:

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

Is this possible? Like we see in bootstrap4 here is equal height cards:

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

解决方案

It seems that bootstrap 4, like you show in the example, is using to get the same height, display: table for the container div and display: table-cell for the inner ones.

Other solution can be using <table> instead <div>, using flex property...
Checkout this How can I make Bootstrap columns all the same height?

这篇关于Bootstrap 3等高缩略图(如Bootstrap 4中的等高卡)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！