css - Twitter Bootstrap：嵌套行？

Question

Twiter Bootstrap 问题：鉴于下图，我如何标记 3 个红色容器以使其流畅且响应迅速？我可以在 a 中定义一个容器/行span*吗？不知道如何处理这样的布局。

Answer 1

Sure you can nest rows inside other spans as deep as you like.

<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>

that should work for your 3 containers inside the 9 row.

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 的三个响应式列

Answer 3

您是否尝试过这种嵌套顺序：

• 容器流体
• 行流体
• 跨度9
• 行流体
• 跨度3 跨度3 跨度3