所有具有相同高度的标签，每行

Question

使用Bootstrap，是否有一种优雅的方式可以让每个行中的表单的所有标签都具有相同的高度，以便输入的底部彼此对齐？

请看看这个JSFiddle。

我想那是什么第二个标签的高度“相同的高度离开”左边是相同的高度标签。或者，如果右侧的输入与另一个输入的底部对齐，那也是可行的。

Answer 1

见updated fiddle

<div class="container-fluid"> 
    <div class="row"> 
     <div class="col-xs-6"> 
      <label class="control-label" for="total_contribution_months">A very large and long label for an input</label> 
     </div> 
     <div class="col-xs-6"> 
      <label class="control-label" for="age">Same height as left</label> 
     </div> 
    </div> 
    <div class="row"> 
     <div class="col-xs-6"> 
      <input id="total_contribution_months" class="form-control" type="text"> 
     </div> 
     <div class="col-xs-6"> 
      <input id="age" class="form-control"> 
     </div> 
    </div>   
</div> 

Answer 2

我们通常不会通过把所有标签成一排牺牲响应。

解决方法：为您的标签添加一个任意高度，然后将所有标签文本推到底部。

label { 
    height: 40px; 
    vertical-align: bottom; 
    display: table-cell; 
    padding-bottom: 5px; 
} 

普莱舍注vertical-align是有效的，只有当display: table-cell;。

JSFiddle