.form-group-lg, .form-group-sm <label> has wrong line-height

Created by: adamhooper

The labels in the sample at http://getbootstrap.com/css/#horizontal-form-group-sizes don't line up vertically. (Neither do the labels I add to my app.)

For posterity's sake, I'll copy/paste the example HTML:

<form class="form-horizontal">
  <div class="form-group form-group-lg">
    <label class="col-sm-2 control-label" for="formGroupInputLarge">Large label</label>
    <div class="col-sm-10">
      <input class="form-control" type="text" id="formGroupInputLarge" placeholder="Large input">
    </div>
  </div>
  <div class="form-group form-group-sm">
    <label class="col-sm-2 control-label" for="formGroupInputSmall">Small label</label>
    <div class="col-sm-10">
      <input class="form-control" type="text" id="formGroupInputSmall" placeholder="Small input">
    </div>
  </div>
</form>

The label.col-sm-2.control-label inherits the body line-height, 1.42857143.

The input has line-height 1.5.

And sure enough, the label is a pixel higher than the input.

As for the form-group-lg: the error is much more pronounced. That's probably why the control-label has padding-top @padding-large-vertical * @line-height-large + 1, which randomly seems about correct. (Otherwise it would be simply @padding-large-vertical + 1, or it would have a comment.)

Fix:

• .form-group-lg .control-label { line-height: @line-height-large; padding-top: (@padding-large-vertical + 1); }
• .form-group-sm .control-label { line-height: @line-height-small; }

... I'm not 100% sure of myself here, hence the lack of pull request. But I'm pretty sure. Anyway, the example at http://getbootstrap.com/css/#horizontal-form-group-sizes is certainly misaligned.