Bootstrap 3 equal height thumbnails (like equal height cards in bootstrap 4)

问题

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#

回答1:

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?

回答2:

I know I'm a little late on this, but I think the best way is flexbox. Here's how it would work in Bootstrap 3:

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

Just add display-flex to the containing row. Also, the upcoming Bootstrap 4 has flexbox as the default so this extra CSS won't be necessary in the future.

Thumbnails with flexbox

You can also do more with the position of child elements.

Also see, make Bootstrap columns all the same height

来源：https://stackoverflow.com/questions/40687425/bootstrap-3-equal-height-thumbnails-like-equal-height-cards-in-bootstrap-4

标签

twitter-bootstrap-3

twitter-bootstrap-4