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>