12

私はTwitterBootstrapグリッドシステムrowで遊んでいて、row-fluid次のように組み合わせることができることに気づきました。

<div class="row">
    <div class="span8">
        ...
    </div>

    <div class="span4>
        <div class="row-fluid">
            <div class="span8">
                ...
            </div>
            <div class="span4">
                ...
            </div>
        </div>
    </div>
</div>

それは私にとってはうまくいきますが、一貫性を保つためにこの動作に頼ることができるかどうかはわかりません。この主題に関する文書が不明確であることがわかった場合。

これは、文書化された信頼できるグリッドシステムの使用ですか？row-fluidそれとも、別の内部でのみ使用する必要がありrow-fluidますか？

4

3 に答える 3

19

の主な目的は、要素.row-fluidのスタイルを変更することです。.spanX

内で.rowは、.spanX要素のピクセル幅は固定されています。レスポンシブスタイルシートを使用している場合、この幅はビューポートのサイズに基づいて変わる可能性があります。

.row-fluidただし、内では、.spanX要素の幅はパーセンテージベースです。ここでの優れた副作用の1つは、要素を任意の.row-fluid要素内に配置でき、コンテナの幅の100％にサイズ変更されることです。同様に、この流動的な行内の要素はそれに応じてサイズが変更されるため、各「列」は、行の幅やDOM内の位置に関係なく、コンテナの約12分の1（ガター幅を考慮）になります。.spanX.row-fluid

設定した数の列に分割したいページの領域がある場合は、を.row-fluid使用できます。

于 2012-09-04T19:45:15.903 に答える
3

はい、信頼性が高く、文書化されています。ドキュメントの基本的な流体グリッドのHTMLセクションをご覧ください。ご覧のとおり、次のことができます。

.rowを.row-fluidに変更して、任意の行を「fluid」にします。列クラスはまったく同じままであるため、固定グリッドと流動グリッドを簡単に切り替えることができます。

つまり、このコンポーネントは、流動的であるかどうかに関係なく、レイアウトのどこでも使用できます。また、「流体レイアウト」セクションがこのセクションから完全に分離されていることにも注意してください。

于 2012-09-04T19:37:47.510 に答える
1

はい、この方法で行と行流体を使用できます。を使用しているbootstrap-responsive.css場合は、ブラウザのサイズが変更されたり、モバイルデバイスでページが表示されたりすると、グリッドサイズがそれに合わせて変更されます。

于 2012-09-04T19:25:00.273 に答える