为什么这些引导程序会绊倒自己？

Question

Here is my Bootstrap form on jsfiddle。它具有以下基本结构：

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

例如

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

我的问题是表单似乎相互绊倒。例如，有一个标签叫做“一个异常长的标签”，之后的标签并没有干净地转到下一行，而是停留在它的右侧。我认为我的 Date 和 Facility 标签也发生了类似的情况，因为 Facility 位置不合适。最后，表格实际上并没有留在他们的盒子里。右侧 Span4 块中的标签与左侧的 Span4 重叠。我在做什么导致所有这些问题？

Answer 1

朋友，

如果您想使用固定宽度布局和表单水平来完成该布局，则表单将不适合 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-->

上面的那些代码应该会呈现类似于图像的输出