栅格 嵌套列

嵌套列

为了使用内置的栅格系统将内容再次嵌套,可以通过添加一个新的 .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> 

运行结果:

栅格 嵌套列

本站部分文章源于互联网,本着传播知识、有益学习和研究的目的进行的转载,为网友免费提供。如有著作权人或出版方提出异议,本站将立即删除。如果您对文章转载有任何疑问请告之我们,以便我们及时纠正。

PS:推荐一个微信公众号: askHarries 或者qq群:474807195,里面会分享一些资深架构师录制的视频录像:有Spring,MyBatis,Netty源码分析,高并发、高性能、分布式、微服务架构的原理,JVM性能优化这些成为架构师必备的知识体系。还能领取免费的学习资源,目前受益良多

转载请注明原文出处:Harries Blog™ » 栅格 嵌套列

分享到:更多 ()

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址