引導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的容器內部和display: table-cell。

其他解決方案可以使用<table>代替<div>，使用flex財產...
結帳這個How can I make Bootstrap columns all the same height?

Answer 2

我知道我有點晚，但我認爲最好的方法是Flexbox的。下面是它如何在引導3工作：

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

只需添加display-flex到含row。此外，即將推出的Bootstrap 4將flexbox作爲默認設置，因此未來將不再需要這些額外的CSS。

​​

您還可以做更多與position of child elements。

---

而且看， make Bootstrap columns all the same height