Bootstrap网格中的垂直对齐

Question

我有一个简单的Bootstrap网格，有许多列，我试图将它们垂直对齐到底部。风格如下：

 .vcenter {
   display: inline-block;
   vertical-align: bottom;
   float: none;
 }

和html：

 <div class="container">
   <div class="row">
     <div class="col-lg-4 vcenter">
       <h2>Aaaaaaaaaaaaa Bbbbbbbbbbbbbbb</h2>
     </div>
     <div class="col-lg-4 vcenter">
       45.6 kg | 151.4 cm | +1.9 %
     </div>
     <div class="col-lg-4 vcenter">
       <button class="btn-primary">cmd 1</button>
       <button class="btn-default">cmd 2</button>
     </div>
   </div>     
 </div>    

第2列和第3列在底部正确对齐，但第1列不是：

在此演示：http://www.bootply.com/EAOSqvSYkk。

知道为什么第1列没有与底部对齐？

Answer 1

h2默认为margin-bottom: 10px;（至少在我的Google Chrome中）。您必须手动将其设置为0px：

h2 {
    margin-bottom: 0;
}

或为所有事情做这件事：

.vcenter * {
    margin-bottom: 0;
}

我更愿意使用其他代码而不是<h2>，例如一个<span>，这样就不必覆盖浏览器样式表了。