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 の人たちの助けを借りて、最終的にこれを修正することができました。将来、他の人に役立つ場合に備えて、ここにヘルプを投稿すると思いました!

オーバーラップは、次の 2 つの理由で発生していました。

  1. 小さい可能性のある列で .btn-group を使用します。(btn-groups は垂直グループに分割されません)。代わりに、他のクラスと同様に .btn-group-vertical クラスを使用します。
  2. タグにはデフォルトの幅が設定されているため、クラス「.span11」を追加すると、この問題が修正されました。
于 2012-12-14T15:35:56.970 に答える