转载

栅格 嵌套列

嵌套列

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

热门推荐

相关文章

阿里云首购8折
bootstrap3
说给你听

本文目录
随机标签
书籍教程
springboot-demo Java入门教程 bootstrap3 CSS Apache基础教程 php ionic 教程 Python mysql教程 eclipse Ubuntu VPS系统配置 AngularJS 教程 MongoDB教程 Struts2教程 Redis教程 Spring教程 Git教程 Jenkins进阶系列 openfire参考指南 Java设计模式 HBase教程 Maven教程 springcloud-demo java-demo hibernate教程 Docker 教程 memcached教程 Quartz指南 Hive教程 ANTLR教程 SpringCloud Ant教程 java实例教程 Hazelcast教程 XStream教程 Elastic-Job-Lite 深入浅出MyBatis ibaties教程 SVN教程 rabittmq教程 Hadoop教程 solr教程 WebService CXF学习 JPA教程 ActiveMQ中文指南 Java内存模型 dubbo教程 python3-demo Linux入门视频教程
近期评论
  1. 1 使用screw来对比数据库表和字段差异
  2. 2 Spring Boot 实现防盗链功能
  3. 3 在Spring Boot中的实现国际化（i18n）
  4. 4 一个用于 SMB/CIFS 网络的 Java 库-JCIFS
  5. 5 Spring Boot 3.x嵌入MongoDB 进行测试
  6. 6 java如何解析和生成yaml文件？
  7. 7 java如何解析和生成sql？
  8. 8 Spring Cloud Zookeeper 快速入门demo
  9. 9 如何在 Spring Cloud 集成 Micrometer Tracing?
  10. 10 如何利用EasyExcel导出带有选择校验框的excel？
网站信息
  • 文章总数：82,731 篇
  • 文件总数：284,305 个
  • 标签总数：2,414 个
  • 分类总数：85 个
  • 留言数量：2,558 条
  • 在线人数：621 人
  • 运行天数：4,435天
  • 最后更新：2024年12月18日13点
Loading...

其他链接

关于本站

本站定位：个人技术类博客

本站作用：写博客、记日志、闲聊扯淡鼓捣技术。

问题交流

[HBLOG]公众号 HBLOG HBLOG