Bootstrap 3 равные высоты миниатюры (например, равные по высоте карты в загрузчике 4)

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

, кажется, что самозагрузки 4, как вы показываете в примере, используется, чтобы получить ту же высоту, display: table для контейнера div и display: table-cell для внутренних.

Другое решение можно использовать <table> вместо <div>, используя flex свойство ...
Checkout это How can I make Bootstrap columns all the same height?

Answer 2

Я знаю, что я немного поздно, но я думаю, что лучший способ 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