转载

栅格 列偏移

列偏移

使用 .col-md-offset-* 类可以将列向右侧偏移。这些类实际是通过使用 * 选择器为当前元素增加了左侧的边距（margin）。例如，.col-md-offset-4 类将 .col-md-4 元素向右侧偏移了4个列（column）的宽度。

.col-md-4
.col-md-4 .col-md-offset-4
.col-md-3 .col-md-offset-3
.col-md-3 .col-md-offset-3
.col-md-6 .col-md-offset-3
  1. <div class="row"> 
  2.   <div class="col-md-4">.col-md-4</div> 
  3.   <div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div> 
  4. </div> 
  5. <div class="row"> 
  6.   <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div> 
  7.   <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div> 
  8. </div> 
  9. <div class="row"> 
  10.   <div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div> 
  11. </div>

在下面的实例中，我们有 <div class="col-md-6">..</div>，我们将使用 .col-md-offset-3 class 来居中这个 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.       <div class="col-xs-6 col-md-offset-3"  
  17.          style="background-color: #dedef8;box-shadow:  
  18.          inset 1px -1px 1px #444, inset -1px 1px 1px #444;"> 
  19.          <p>Lorem ipsum dolor sit amet, consectetur adipisicing  
  20.             elit. 
  21.          </p> 
  22.       </div> 
  23.  
  24.    </div> 
  25. </div> 
  26.  
  27. </body> 
  28. </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 条
  • 在线人数：694 人
  • 运行天数：4,435天
  • 最后更新：2024年12月18日13点
Loading...

其他链接

关于本站

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

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

问题交流

[HBLOG]公众号 HBLOG HBLOG