css - Twitter Bootstrap: ネストされた行?

Question

Twiter Bootstrap の質問: 下の画像の場合、3 つの赤いコンテナーをマークアップして流動的で応答性を高めるにはどうすればよいですか? 内にコンテナ/行を定義できますspan*か? そのようなレイアウトに取り組む方法がわかりません。

Answer 1

もちろん、他のスパン内に好きなだけ行をネストできます。

<div class="container-fluid">
    <div class="row-fluid">
        <div class="span9">
            <div class="span4"></div>
            <div class="span4"></div>
            <div class="span4"></div>
        </div>
        <div class="span3"></div>
    </div>
</div>

これは、9 行内の 3 つのコンテナーで機能するはずです。

Answer 2

行内に行をネストできますが、マークアップが正しいことを確認する必要があります。

<div class="container-fluid">
    <div class="row-fluid">
        <div class="span9">
            <div class="row-fluid">
                <div class="span4">...</div>
                <div class="span4">...</div>
                <div class="span4">...</div>
            </div>
        </div>
        <div class="span3">...</div>
    </div>
</div>

リンクに従って、これを使用した実際の例を表示します。HTML と結果ビューの間で垂直バーを移動してみてください。その場でレスポンシブ レイアウトが機能していることがわかります。Twitter Bootstrap を使用した 3 つのレスポンシブ列

Answer 3

この入れ子の順序を試しましたか:

• コンテナ流体
• 行流体
• スパン9
• 行流体
• スパン3 スパン3 スパン3