Bootstrap流式网格重叠问题

Question

我已经使用Twitter Bootstrap一段时间来玩弄流体网格，但即使在最新版本中，我发现很难创建一个不会出现重叠元素的流体网格。正确的Bootstrap CSS文件已包含，并且所有标记都是正确的，因此我只能假设这与输入字段有关，但我原以为Bootstrap的创建者会考虑到这一点？

您可以在此处查看代码：http://jsfiddle.net/pNRzV/1/ 尝试调整内容窗口大小，您将看到重叠问题。

欢迎任何意见/评论，感谢您的时间！

<div class="container-fluid">
<div class="row-fluid">
  <div class="span2">
    <div class="well well-small">
      <ul class="nav nav-list" id="navigation">
        <li><a href="/link" >link</a></li>
        <li><a href="/link" >link</a></li>
        <li><a href="/link" >link</a></li>
        <li><a href="/link" >link</a></li>
        <li><a href="/link" >link</a></li>
        <li><a href="/link" >link</a></li>
      </ul>
    </div>
  </div>
  <div class="span10">
    <div class="row-fluid">
      <div class="span3">
        <form method="POST">
          <fieldset>
            <legend>Some Random details</legend>
            <select>
              <option value="volvo">Volvo</option>
              <option value="saab">Saab</option>
              <option value="mercedes">Mercedes</option>
              <option value="audi">Audi</option>
            </select>
            <select>
              <option value="volvo">Volvo</option>
              <option value="saab">Saab</option>
              <option value="mercedes">Mercedes</option>
              <option value="audi">Audi</option>
            </select>
            <select>
              <option value="volvo">Volvo</option>
              <option value="saab">Saab</option>
              <option value="mercedes">Mercedes</option>
              <option value="audi">Audi</option>
            </select>
            <input type="submit" class="btn btn-primary" name="submit" value="Submit">
          </fieldset>
        </form>
      </div>

      <div class="span3">
        <fieldset>
          <legend>Some random long legend</legend>
          <ul>
            <li><a href="/">
              <i class="icon-film"></i>berkeley napier 3</a>
              <a href="/"><i class ="icon-trash"></i></a>
            </li>
          </ul>
          <div class="btn-group">
            <a class="btn btn-small btn-inverse" href="/">Preview Something</a>
            <a class="btn btn-small btn-inverse" href="/">Preview Something else</a>
          </div>
        </fieldset>
      </div>

      <div class="span3">
        <fieldset>
          <legend>Options</legend>
            <div class="btn-group-vertical">
              <a class="btn btn-info" href="/">Some LongButton Text</a>
              <a class="btn btn-info" href="/">Longer Long Button Text</a>
              <a class="btn btn-info disabled" data-href="/">Button Text</a>
              <a class="btn btn-info disabled" data-href="/">Button Text</a>
            </div>
        </fieldset>
      </div>

      <div class="span3 actions">
        <fieldset>
          <legend>Buttons</legend>
          <div class="btn-group btn-group-vertical">
            <a class="btn btn-primary" href="/"><i class="icon-list icon-white"></i>
              Create Something
            </a>
            <a class="btn btn-primary" href="/"><i class="icon-circle-arrow-down icon-white"></i> Download Something</a>
            <a class="btn btn-primary" href="/"><i class="icon-share icon-white"></i> Some Button</a>
          </div>
        </fieldset>
      </div>
    </div>
  </div>
</div>

- Oli C

Answer 1

最终我通过Bootstrap团队的帮助解决了这个问题，我想在这里发布这些帮助以便日后有需要的人可以使用！

重叠发生的原因有两个：

1. 在可能很小的列上使用.btn-group（btn-group不会分成垂直组）。相反，在它上面使用.btn-group-vertical类，就像你的其他按钮一样。 2. 标签默认有一个宽度设置，所以添加“.span11”类可以解决此问题。

- Oli C