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和Result视图之间移动垂直条，然后您将看到响应式布局在那里工作。 Three Responsive columns with Twitter Bootstrap

Answer 3

您是否尝试过此嵌套顺序：

• 容器流体
• 行流体
• span9
• 行流体
• span3 span3 span3