title: Why are these bootstrap forms tripping over themselves?
body: <p><a href="http://jsfiddle.net/nxWXd/" rel="nofollow">Here is my Bootstrap form on jsfiddle</a>. It has this basic structure:</p>
  
  <pre><code>-------------------------------------------------
  |                    Span 12                    |
  |   ----------------------------   ----------   |
  |   |  ----------  ----------  |   |        |   |
  |   |  |        |  |        |  |   |        |   |
  |   |  | Span 4 |  | Span 4 |  |   | Span 4 |   |
  |   |  |        |  |        |  |   |        |   |
  |   |  ----------  ----------  |   |        |   |
  |   |           Span 8         |   |        |   |
  |   ----------------------------   ----------   |
  |                                               |
  -------------------------------------------------
  </code></pre>
  
  <p>e.g.</p>
  
  <pre><code>&lt;div class="span12"&gt;
      &lt;div class="row"&gt;
          &lt;div class="span8"&gt;
              &lt;div class="row"&gt;
                  &lt;div class="span4"&gt;&lt;/div&gt;
                  &lt;div class="span4"&gt;&lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="row"&gt;&lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="span4"&gt;&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;​
  </code></pre>
  
  <p>My problem is that the forms seem to trip up on each other. For example, there is a label called "<strong>An unusually long label</strong>", and the label after that does not cleanly go to the next line, but stays to the right of it. I think something similar is happening with my <strong>Date</strong> and <strong>Facility</strong> labels, since <strong>Facility</strong> is way out of position. Lastly, the forms aren't actually staying in their boxes. The labels from the Span4 block on the right are overlapping the Span4 to its left. What am I doing that is causing all these problems?</p>