title: Twitter Bootstrap - Labels on top of form fields not aligned
body: <p>I'm trying to create a form with form elements side by side, and their labels (aligned with the beginning of the respective input element) on top of them, like so:</p>
  
  <pre><code>Label                 Label2
  +----------------+    +-------+
  +----------------+    +-------+
  </code></pre>
  
  <p>The following doesn't work as expected, because "Label2" is slightly unaligned with the input element:</p>
  
  <pre><code>&lt;div class="controls controls-row"&gt;
      &lt;label class="span9"&gt;&lt;span&gt;Label&lt;/span&gt;&lt;/label&gt;
      &lt;label class="span2"&gt;&lt;span&gt;Label2&lt;/span&gt;&lt;/label&gt;
  &lt;/div&gt;
  &lt;div class="controls controls-row"&gt;
      &lt;input type="text" class="span9" /&gt;
      &lt;input type="text" class="span2" /&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I got it to work using this workaround-ish structure:</p>
  
  <pre><code>&lt;div class="controls controls-row"&gt;
      &lt;div class="span9"&gt;
          &lt;label&gt;&lt;span&gt;Label&lt;/span&gt;&lt;/label&gt;
      &lt;/div&gt;
      &lt;div class="span2"&gt;
          &lt;label&gt;&lt;span&gt;Label2&lt;/span&gt;&lt;/label&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="controls controls-row"&gt;
      &lt;div class="span9"&gt;
          &lt;input type="text" class="span12" /&gt;
      &lt;/div&gt;
      &lt;div class="span2"&gt;
          &lt;input type="text" class="span12" /&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>So could this be a bug? Because on the <a href="http://twitter.github.com/bootstrap/base-css.html#forms" rel="noreferrer">Twitter Bootstrap page</a> it says:</p>
  
  <blockquote>
    <p>Use .span1 to .span12 for inputs that match the same sizes of the grid columns.</p>
  </blockquote>
  
  <p><a href="http://jsfiddle.net/kLuB3/" rel="noreferrer">Here's a JSFiddle</a> that reproduces my problem.</p>