Bootstrap网格系统：水平形式的错误包装

Question

我只是使用bootstrap和.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>

Fiddle