
上QQ阅读APP看书,第一时间看更新
2.3.7 列嵌套
栅格系统支持列的嵌套,即在一个列里面再嵌入一个或多个行(.row)。注意,内部所嵌套的row的宽度为100%,就是当前外部列的宽度。
【实例2-9】(文件nestgrid.html)
<div class="container"> <div class="row"> <div class="col-md-3">col-md-3</div> <div class="col-md-9"> Level 1:.col-md-9 <div class="row"> <div class="col-md-6"> Level 2:.col-md-6 </div> <div class="col-md-6"> Level 2:.col-md-6 </div> </div> </div> </div> </div>
以上代码在Chrome浏览器中的运行效果如图2-15所示。

图2-15 列嵌套的效果