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.)
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:
The
label.col-sm-2.control-labelinherits thebodyline-height,1.42857143.The
inputhas line-height1.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.