Bootstrap form spans not even - forms

Question

I have created a form and would like to ensure that all the spans line up and are square. But even though all the spans will add up to 12, each row is a different width. Is just the way it is, or am I doing something wrong?
<div class="container ">
<form class="well form-inline">
<div class="controls controls-row">
<label class="span1" for="input01">
Prefix
</label>
<input type="text" class="span1" id="input01" placeholder="Dr."><label class="span1" for="input02">
First Name
</label>
<input type="text" class="span3" id="input02" placeholder="John">
<label class="control-label span1" for="input03">
last Name
</label>
<input type="text" class="span3" id="input03" placeholder="Doe">
<label class="control-label span1" for="input04">
Suff
</label>
<input type="text" class="span1" id="input04" placeholder="Jr.">
</div>
<div class="controls controls-row">
<label class="span1" for="input01">
Company
</label>
<input type="text" class="span5" id="input01" placeholder="Sample LLC">
<label class="span1" for="input02">
Title
</label>
<input type="text" class="span5" id="input02" placeholder="Director of Samples">
</div>
<div class="controls controls-row">
<label class="span1" for="input01">
Address 1
</label>
<input type="text" class="span5" id="input01" placeholder="Address Line 1">
<label class="span1" for="input02">
Address 2
</label>
<input type="text" class="span5" id="input02" placeholder="Address Line 2">
</div>
<div class="controls controls-row">
<label class="span1" for="input01">
Cntry
</label>
<select class="input-medium span2 countries" data-country="US"></select>
<label class="span1" for="input01">
City
</label>
<input type="text" class="span2" id="input02" placeholder="City">
<label class="span1" for="input02">
St/Prv
</label>
<select class="input-medium span2 states" data-country="US" data-state="CA"></select>
<label class="span1" for="input01">
Zip
</label>
<input type="text" class="span2" id="input02" placeholder="City">
</div>
<div class="controls controls-row">
<label class="span1" for="input01">
Email
</label>
<input type="text" class="span5" id="input01" placeholder="you#yourdomain.com">
<label class="span2" for="input02">
Confirm Email
</label>
<input type="text" class="span4" id="input02" placeholder="you#yourdomain.com">
</div>
<div class="controls controls-row">
<label class="span1" for="input01">
Phone
</label>
<input type="text" class="span3" id="input01" placeholder="">
<label class="span1" for="input02">
Cell
</label>
<input type="text" class="span3" id="input02" placeholder="">
<label class="span1" for="input02">
Fax
</label>
<input type="text" class="span3" id="input02" placeholder="">
</div>
</form>
</div>
screen shot here: http://www.flickr.com/photos/92503149#N07/8409032538/in/photostream

Answer 1

You only posted a snippet, so I do not know how you integrat the form in the rest of your page, but a row-fluid could help:
<form class="well form-inline row-fluid">
I tried it out, looks much nicer already.
More hints:
some labels are missing the class control-label. This is overall important due to the line-height adjustment that control-label does.
depending on the complete width of the form, some labels might not fit into span1 on one line (was the case in my quick tests)
and a general design hint: the last line with 3 label/input pairs breaks the layouting a bit. Usually, you try to stick to certain vertical positioning.
Hope this helps