Twitter Bootstrap - Shortcuts on top of form fields are not aligned

Question

I am trying to create a form with form elements side by side and their labels (aligned with the beginning of the corresponding input element) on top of them:

Label Label2 +----------------+ +-------+ +----------------+ +-------+ 

The following does not work as expected, because "Label2" does not align slightly with the input element:

 <div class="controls controls-row"> <label class="span9"><span>Label</span></label> <label class="span2"><span>Label2</span></label> </div> <div class="controls controls-row"> <input type="text" class="span9" /> <input type="text" class="span2" /> </div> 

I got it to work using this workaround:

 <div class="controls controls-row"> <div class="span9"> <label><span>Label</span></label> </div> <div class="span2"> <label><span>Label2</span></label> </div> </div> <div class="controls controls-row"> <div class="span9"> <input type="text" class="span12" /> </div> <div class="span2"> <input type="text" class="span12" /> </div> </div> 

So could this be a mistake? Since the Bootstrap Twitter page says:

Use .span1 for .span12 for inputs that correspond to the same grid column sizes.

Here's a JSFiddle that reproduces my problem.

Answer 1

Probably the easiest solution is to remove the spaces in the HTML between the two input s:

 <input type="text" class="span9" /> <input type="text" class="span2" /> 

in

 <input type="text" class="span9" /><input type="text" class="span2" /> 

Answer 2

I managed to do this using the grid:

 <div class="row-fluid"> <div class="span9"> <label>First name</label> <input name="firstName" class="span12" placeholder="First name" type="text"> </div> <div class="span3"> <label>Last name</label> <input name="lastName" class="span12" placeholder="Last name" type="text"> </div> </div> 

Answer 3

The reason for its bias is a space after the first <input> . These spaces are apparently a “feature” of older browsers: they add the Unicode SPACE character (U + 0020) after the <input> , followed by the other <input> if they are not on the same markup line.

You can reduce the font size of the ancestor to 0, so this space will not be visible:

 .controls.controls-row { font-size: 0; }​