多列表单上的标签高度

Question

在顶部带有标签的多列引导表单上，如果其中一个标签大于列大小，则输入将不对齐。请参阅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