twitter-bootstrap - 引导网格系统：水平形式的不良包装

Question

我只是使用引导程序和标签构建一个表单.form-horizontal，一行中有 4 列，例如

<form class="form-horizontal">
    <div class="row span12">
      <div class="control-group span3">
        <label class="control-label" for="inputEmail">Email</label>
        <div class="controls">
          <input type="text" id="inputEmail" placeholder="Email">
        </div>
      </div>
      <div class="control-group span3">
        <label class="control-label" for="inputEmail">Email</label>
        <div class="controls">
          <input type="text" id="inputEmail" placeholder="Email">
        </div>
      </div>
      <div class="control-group span3">
        <label class="control-label" for="inputEmail">Email</label>
        <div class="controls">
          <input type="text" id="inputEmail" placeholder="Email">
        </div>
      </div>                    
      <div class="control-group span3">
        <label class="control-label" for="inputPassword">Password</label>
        <div class="controls">
          <input type="password" id="inputPassword" placeholder="Password">
        </div>
      </div>
    </div>
</form>

但是在调整它的大小时，它的布局确实很糟糕，如下图所示：

这是一个演示它的小提琴：http: //jsfiddle.net/juristr/XXXqN/
（只需尝试调整 HTML 窗口的大小以查看效果）

关于我做错了什么的任何提示？Bootstrap 是否不能自动包装不再适合的项目，以每行 2 列结束？

Answer 1

我不确定您是否可以使用表单控件来适应表单，因为它有自己的边距。检查它是否有效

<div class="row-fluid">    
    <form class="form-horizontal">
        <div class="span3">
            <label>Email</label>
            <input type="text" class="span12" placeholder="Email" />
        </div>
        <div class="span3">
            <label>Email</label>
            <input type="text" class="span12" placeholder="Email" />
        </div>
        <div class="span3">
            <label>Email</label>
            <input type="text" class="span12" placeholder="Email" />
        </div>
        <div class="span3">
            <label>Password</label>
            <input type="password" class="span12" placeholder="Password"  />
        </div>
    </form>
</div>

小提琴