Etikettenhöhe bei mehrspaltigem Formular

Question

Bei mehrspaltigen Bootstrap-Formularen mit Beschriftungen oben sind die Eingaben nicht ausgerichtet, wenn eine der Beschriftungen größer als die Spaltengröße ist. Siehe Beispiel auf 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> 

habe ich nicht gute Lösung gefunden, dieses Problem zu lösen. Es gibt einige Standard-Lösung mit Bootstrap-Klassen?

Answer 1

Sie können mit diesem versuchen:

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

Get Höhe für jedes Etikett und stellen min-height für jedes Etikett mit dem Maximalwert

http://jsfiddle.net/yynkc2zn/7