Bootstrap基础教程
上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 列嵌套的效果