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