Why are these bootstrap forms tripping over themselves?

Question

Here is my Bootstrap form on jsfiddle. It has this basic structure:

-------------------------------------------------
|                    Span 12                    |
|   ----------------------------   ----------   |
|   |  ----------  ----------  |   |        |   |
|   |  |        |  |        |  |   |        |   |
|   |  | Span 4 |  | Span 4 |  |   | Span 4 |   |
|   |  |        |  |        |  |   |        |   |
|   |  ----------  ----------  |   |        |   |
|   |           Span 8         |   |        |   |
|   ----------------------------   ----------   |
|                                               |
-------------------------------------------------

e.g.

<div class="span12">
    <div class="row">
        <div class="span8">
            <div class="row">
                <div class="span4"></div>
                <div class="span4"></div>
            </div>
            <div class="row"></div>
        </div>
        <div class="span4"></div>
    </div>
</div>​

My problem is that the forms seem to trip up on each other. For example, there is a label called "An unusually long label", 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 Date and Facility labels, since Facility 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?

Answer 1

buddy,

If you want to accomplish that layout using fixed width layout and form-horizontal, the form won't fit in the span4 column. You may use the basic form for that purpose, by using

 <form class="well">.

Also, you have to implement proper nesting of rows and columns. Like so,

<div class="row-fluid">
    <div class="span8">
        <div class="row-fluid">
            <div class="span4">
                Some Content Here...
            </div>
            <div class="span4">
                Some Content Here...
            </div>
        </div><!-- row-fluid end-->
    </div><!-- span8 end-->

    <div class="span4">
        Some Content Here...
    </div><!-- span4 left-col end-->
</div><!--row fluid end-->

And if you want to stuff the column with form, here's an example...

<div class="row">
<div class="span8">
    <div class="row">
        <div class="span4">
            <form class="well">
                <label>Label name</label>
                <input type="text" placeholder="Type something…" class="span3">
                <p class="help-block">Example block-level help text here.</p>
                <label class="checkbox">
                  <input type="checkbox"> Check me out
                </label>
                <button class="btn" type="submit">Submit</button>
            </form>
        </div>
        <div class="span4">
        <form class="well">
            <label>Label name</label>
            <input type="text" placeholder="Type something…" class="span3">
            <p class="help-block">Example block-level help text here.</p>
            <label class="checkbox">
              <input type="checkbox"> Check me out
            </label>
            <button class="btn" type="submit">Submit</button>
        </form>
        </div>
    </div>
</div><!-- span8 end-->

<div class="span4" id="side">
    <form class="well">
        <label>Label name</label>
        <input type="text" placeholder="Type something…" class="span3">
        <p class="help-block">Example block-level help text here.</p>
        <label class="checkbox">
          <input type="checkbox"> Check me out
        </label>
        <button class="btn" type="submit">Submit</button>
    </form>
 </div><!--row fluid end-->

Those codes above shall render an output similar to the image