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?

[Here it is with `row-fluid`](http://jsfiddle.net/nxWXd/2/). I figured using `row-fluid` just complicated the example. Plus, it doesn't pop the boxes down when you resize if you use `row-fluid`. — brentonstrine, Aug 23 '12 at 23:21
I meant just the top container row http://jsfiddle.net/nxWXd/3/ — João Silva, Aug 23 '12 at 23:25
@João ah, that fixes the overlapping problem. Why does it fix it? And why do the `.span4` boxes seem to be different lengths? — brentonstrine, Aug 23 '12 at 23:28
With `row` you are using a fixed width layout, which means that content will compress to fit in that area, whilst `row-fluid` is percentage-based. Take at look at this answer (http://stackoverflow.com/a/9897227/140816). — João Silva, Aug 23 '12 at 23:39
@João I get that, but 4+8=12, which is the width of the parent element, so the fixed vs. fluid shouldn't make a difference. That's what confuses me--and the Bootstrap documentation says it too: make sure the child columns add up to the parent. — brentonstrine, Aug 23 '12 at 23:43
I don't think your 1st span12 serves any purpose, but more to the point, you need to fix the width of the content too, so that the select wouldn't take the form grid width, but a span4 for example. — Sherbrow, Aug 24 '12 at 05:26

score 1 · Accepted Answer · answered Aug 24 '12 at 15:19

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 enter image description here

Thanks! I wonder if the multiple `form` elements will mess things up though, since they're all really one form and are all submitting via the same button. Also, in your example the inputs are on the line below the labels--is it wrong to do it the way I was? — brentonstrine, Aug 24 '12 at 18:11
There is something wrong with your markup, but I didn't bother to scrutinize your codes. For a semantic markup for an input with label, it should be Name. And from my example, yeah, label should be entered first before the input field. — GaryP, Aug 25 '12 at 14:02
Sorry, what was wrong with it? That it was missing the `for` attribute? I believe it is optional. — brentonstrine, Aug 25 '12 at 17:09
Oh, I am not saying that the label is what messed up your document. — GaryP, Aug 25 '12 at 18:01

Why are these bootstrap forms tripping over themselves?

1 Answers1