码迷,mamicode.com
首页 > 其他好文 > 详细

Bootstrap页面布局4 - 嵌套布局

时间:2014-07-30 03:16:22      阅读:278      评论:0      收藏:0      [点我收藏+]

标签:style   color   strong   div   布局   oo   class   on   

嵌套布局:

  在一行中,有三列,每一列都有对应的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>

Bootstrap页面布局4 - 嵌套布局,布布扣,bubuko.com

Bootstrap页面布局4 - 嵌套布局

标签:style   color   strong   div   布局   oo   class   on   

原文地址:http://www.cnblogs.com/Zell-Dinch/p/3876799.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!