所有具有相同高度的標籤，每行

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