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>

Answer 1

我最终在Bootstrap家伙的帮助下设法解决了这个问题，我想我会在这里发布帮助以防将来对其他人有用！

由于两个原因，重叠发生了：

在可能很小的列上使用.btn-group。（btn-groups不会分成垂直组）。相反，在其上使用.btn-group-vertical类就像其他类一样。
标签上设置了默认宽度，因此添加“.span11”类可解决此问题。

Bootstrap流体网格重叠问题

1 个答案: