栅格 嵌套列 key:col-sm-*、col-xs-* - Bootstrap 响应式布局

栅格 嵌套列


嵌套列

为了使用内置的栅格系统将内容再次嵌套,可以通过添加一个新的 .row 元素和一系列 .col-sm-* 元素到已经存在的 .col-sm-* 元素内。被嵌套的行(row)所包含的列(column)的个数不能超过12(其实,没有要求你必须占满12列)。

Level 1: .col-sm-9
Level 2: .col-xs-8 .col-sm-6
Level 2: .col-xs-4 .col-sm-6
  1. <div class="row"> 
  2.   <div class="col-sm-9"> 
  3.     Level 1: .col-sm-9 
  4.     <div class="row"> 
  5.       <div class="col-xs-8 col-sm-6"> 
  6.         Level 2: .col-xs-8 .col-sm-6 
  7.       </div> 
  8.       <div class="col-xs-4 col-sm-6"> 
  9.         Level 2: .col-xs-4 .col-sm-6 
  10.       </div> 
  11.     </div> 
  12.   </div> 
  13. </div>

在下面的实例中,布局有两个列,第二列被分为两行四个盒子。

  1. <!DOCTYPE html> 
  2. <html> 
  3. <head> 
  4.    <title>Bootstrap 实例 - 嵌套列</title> 
  5.    <link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet"> 
  6.    <script src="/scripts/jquery.min.js"></script> 
  7.    <script src="/bootstrap/js/bootstrap.min.js"></script> 
  8. </head> 
  9. <body> 
  10.  
  11. <div class="container"> 
  12.  
  13.    <h1>Hello, world!</h1> 
  14.  
  15.    <div class="row"> 
  16.  
  17.       <div class="col-md-3" style="background-color: #dedef8;box-shadow:  
  18.          inset 1px -1px 1px #444, inset -1px 1px 1px #444;"> 
  19.          <h4>第一列</h4> 
  20.          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> 
  21.       </div> 
  22.  
  23.       <div class="col-md-9" style="background-color: #dedef8;box-shadow:  
  24.          inset 1px -1px 1px #444, inset -1px 1px 1px #444;"> 
  25.          <h4>第二列 - 分为四个盒子</h4> 
  26.          <div class="row"> 
  27.             <div class="col-md-6" style="background-color: #B18904; 
  28.                box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;"> 
  29.                <p>Consectetur art party Tonx culpa semiotics. Pinterest  
  30.                   assumenda minim organic quis. 
  31.                </p> 
  32.             </div> 
  33.             <div class="col-md-6" style="background-color: #B18904; 
  34.                box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;"> 
  35.                <p> sed do eiusmod tempor incididunt ut labore et dolore magna  
  36.                   aliqua. Ut enim ad minim veniam, quis nostrud exercitation  
  37.                   ullamco laboris nisi ut aliquip ex ea commodo consequat. 
  38.                </p> 
  39.             </div> 
  40.          </div> 
  41.  
  42.          <div class="row"> 
  43.             <div class="col-md-6" style="background-color: #B18904; 
  44.                box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;"> 
  45.                <p>quis nostrud exercitation ullamco laboris nisi ut  
  46.                   aliquip ex ea commodo consequat. 
  47.                </p> 
  48.             </div>    
  49.             <div class="col-md-6" style="background-color: #B18904; 
  50.                box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;"> 
  51.                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,  
  52.                   sed do eiusmod tempor incididunt ut labore et dolore magna  
  53.                   aliqua. Ut enim ad minim.</p> 
  54.             </div> 
  55.          </div> 
  56.  
  57.       </div> 
  58.  
  59.    </div> 
  60.  
  61. </div> 
  62.  
  63. </body> 
  64. </html> 

运行结果:

\

没有找到答案?搜索一下吧!

学习导航


Bootstrap3中文开发手册参考网站
w3c.3306.biz 提供的内容仅用于学习或测试。所有内容均整理自互联网!目的是为了让更多读者欣赏,我们不保证内容的正确性,并对任何法律问题及风险不承担任何责任。 当您在浏览本站时,代表您已接受了本站的使用条款和隐私条款。(删除内容:512876994#qq.com)