首页 > 代码库 > Bootstrap页面布局4 - 嵌套布局
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>