为什么这些引导形式绊倒了自己？

Question

Here is my Bootstrap form on jsfiddle。它有这个基本结构：

-------------------------------------------------
|                    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>​

我的问题是表格似乎互相绊倒了。例如，有一个名为“异常长标签”的标签，之后的标签不会干净地转到下一行，而是保持在其右侧。我认为我的日期和设施标签会发生类似情况，因为设施不合适。最后，这些表格实际上并没有留在他们的盒子里。来自右侧Span4块的标签与Span4的左侧重叠。我在做什么导致所有这些问题？

Answer 1

哥们

如果要使用固定宽度布局和form-horizo​​ntal完成该布局，则表单将不适合span4列。您可以使用

将基本表单用于此目的

 <form class="well">.

此外，您必须实现行和列的正确嵌套。像这样，

<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-->

如果你想用表格填充列，这是一个例子......

<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-->

上述代码应呈现类似于图像

的输出