3

我已经使用 Twitter Bootstrap 玩了一段时间的流体网格，但即使在最新版本中，我也发现在没有重叠元素的情况下创建流体网格是不可能的。包含正确的引导 css 文件并且所有标记都是正确的，所以我只能假设这与输入字段有关，但我原以为引导程序的创建者会考虑到这一点？

您可以在此处查看代码：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>

4

1 回答 1

2

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

发生重叠的原因有两个：

  1. 在可能很小的列上使用 .btn-group。（btn-groups 不会分成垂直组）。相反，像其他类一样使用 .btn-group-vertical 类。
  2. 标签上设置了默认宽度，因此添加类“.span11”解决了这个问题。
于 2012-12-14T15:35:56.970 回答