![Bootstrap基础教程](https://wfqqreader-1252317822.image.myqcloud.com/cover/864/53286864/b_53286864.jpg)
上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所示。
![](https://epubservercos.yuewen.com/5D9695/31751384504064006/epubprivate/OEBPS/Images/figure-0032-0027.jpg?sign=1739590068-n80ZWFW1lc4AyiixabDSRoMLQWE1FRfu-0-6af796119877d07355a448e6a25ef34b)
图2-15 列嵌套的效果