複数列形式のラベルの高さ

Question

ラベルが一番上にある複数列のブートストラップ形式の場合、ラベルの1つが列サイズより大きい場合、入力は一列になりません。 http://jsfiddle.net/yynkc2zn/

<div class="container"> 
    <div class="row"> 
    <form action="#"> 
     <div class="form-group col-xs-3"> 
     <label for="field1">This is large label for Field1</label> 
     <input type="text" class="form-control" id="field1" placeholder="field1"> 
     </div> 
     <div class="form-group col-xs-3"> 
     <label for="field2">Field2</label> 
     <input type="text" class="form-control" id="field2" placeholder="field2"> 
     </div> 
     <div class="form-group col-xs-3"> 
     <label for="field3">Field3</label> 
     <input type="text" class="form-control" id="field3" placeholder="field3"> 
     </div> 
     <div class="form-group col-xs-3"> 
     <label for="field4">Field4</label> 
     <input type="text" class="form-control" id="field4" placeholder="field4"> 
     </div> 
     <div class="clearfix visible-xs"></div> 
     <div class="form-group col-xs-3"> 
     <label for="field5">Field5</label> 
     <input type="text" class="form-control" id="field5" placeholder="field5"> 
     </div> 
     <div class="form-group col-xs-3"> 
     <label for="field5">Field6</label> 
     <input type="text" class="form-control" id="field6" placeholder="field6"> 
     </div> 
    </form> 
    </div> 
</div> 

私はこの問題を解決するための良い解決策が見つかりませんでした。ブートストラップクラスを使用したいくつかの標準的な解決策がありますか？

Answer 1

あなたはこれを試すことができます：

$(function() { 
    var maximum = null; 
    $('label').each(function(){ 
    var hvalue = $(this).height(); 
    maximum = (hvalue > maximum) ? hvalue : maximum; 
    }); 
    $('label').css('min-height',maximum+'px'); 
}) 

は

http://jsfiddle.net/yynkc2zn/7