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视图之间移动垂直条,然后您将看到响应式布局在那里工作.Twitter Bootstrap的三个响应列

Answer 3

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

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