Bootstrap页面布局4 - 嵌套布局

嵌套布局：

　　在一行中，有三列，每一列都有对应的BS栅格系统中的格子，以下例中因为 .row中的div对应的class分别是span4,span4,span4,所以其每一列对应的格子数是

　　4,4,4

　　现在有一个需求，要在第三列中另外再布局出2列，且这2列宽度相同那么操作如下：看彩色部分

　　　　<div class=‘row‘>

　　　　　　<div class=‘span4‘>

　　　　　　　　<h2>栏目一</h2>

　　　　　　　　<p>段落1</p>

　　　　　　</div>

　　　　　　<div class=‘span4‘>

　　　　　　　　<h2>栏目二</h2>

　　　　　　　　<p>段落2</p>

　　　　　　</div>

　　　　　　<div class=‘span4‘>

　　　　　　　　<h2>栏目三</h2>　　　　　

　　　　　　　　<p>段落3</p>

　　　　　　　　<!--这里是嵌套布局-->
　　　　　　　　<div class=‘row‘>
　　　　　　　　　　<div class=‘span2‘>嵌套3.1</div>
　　　　　　　　　　<div class=‘span2‘>嵌套3.2</div>
　　　　　　　　</div>

　　　　　　</div>

　　　　</div>

注意：

　　固定布局下的嵌套布局（求格子和）

　　　　第三列的格子数是4，那么在其中的列的格子数的总和不能大于4

　　流动布局下的嵌套布局（按百分比计算12/6）

　　　　第三列的格子数是4，但是流动布局下按照百分比计算，要平均分配的话，因该是12/6才可以所以以上的嵌套部分在流动布局下为

　　　　<div class=‘row‘>
　　　　　　<div class=‘span6‘>嵌套3.1</div>
　　　　　　<div class=‘span6‘>嵌套3.2</div>
　　　　</div>

Bootstrap页面布局4 - 嵌套布局