理解了栅格化，那么栅格偏移也相对容易理解了。v3的偏移分别有以下几种：

  • offset：左外边距（margin-left）；
  • pull：右位移（right）；
  • push：左位移（left）。

其中offset使用的频率最高。不同的列宽度对应的外边距是不同的，所以每一种类型偏移都有四种，以offset为例（以下皆以offset为例）：

  • xs：col-xs-offset-0 ~ col-xs-offset-12
  • sm：col-sm-offset-0 ~ col-sm-offset-12
  • md：col-md-offset-0 ~ col-md-offset-12
  • lg：col-lg-offset-0 ~ col-lg-offset-12

<label class="col-sm-2 col-md-offset-1 control-label">返利啦</label>

3、bootstrap3.0 栅格偏移 布局中的一个特产的更多相关文章

  1. Bootstrap3.0 栅格系统背后的精妙魔法(Bootstrap3.0的栅格布局系统实现原理)

    这个标题取的有点奇怪,怪我翻译的有问题吧.英文学平有限,有道词典和google翻译齐上阵是必须的.还好翻译的不是小说,对于技术文章,还是能勉强翻过来的. 本文主要讲解了Bootstrap3.0的栅格布 ...

  2. andriod8.1.0源码编译中的一个坑-package com.sun.javadoc does not exist

    这里记录编译过程中的一个坑!!! 编译过程中出现了下面的报错 external/doclava/src/com/google/doclava/ClassInfo.java:20: error: pac ...

  3. Bootstrap3基础 栅格系统 列中有行，行中有列

      内容 参数   OS   Windows 10 x64   browser   Firefox 65.0.2   framework     Bootstrap 3.3.7   editor    ...

  4. 解决div布局中第一个div的margin-top在浏览器中显示无效果问题。

    原味来源:http://www.hicss.net/do-not-tell-me-you-understand-margin/ 垂直外边距合并问题 别被上面这个名词给吓倒了,简单地说,外边距合并指的是 ...

  5. Bootstrap3.0的栅格布局系统实现原理

    这个标题取的有点奇怪,怪我翻译的有问题吧.英文学平有限,有道词典和google翻译齐上阵是必须的.还好翻译的不是小说,对于技术文章,还是能勉强翻过来的. 本文主要讲解了Bootstrap3.0的栅格布 ...

  6. Bootstrap3.0学习第三轮(栅格系统案例)

    Bootstrap3.0学习第三轮(栅格系统案例) 前言 在前面的一篇文章当中http://www.cnblogs.com/aehyok/p/3400499.html主要学习了栅格系统的基本原理,以及 ...

  7. Bootstrap3.0学习第六轮(表单)

    Bootstrap3.0学习第六轮(表单) 前言 阅读之前您也可以到Bootstrap3.0入门学习系列导航中进行查看http://www.cnblogs.com/aehyok/p/3404867.h ...

  8. Bootstrap3.0入门学习系列教程

    可视化布局:http://www.runoob.com/try/bootstrap/layoutit/ 1.浏览器兼容性:你可以去看看大牛的一篇文章http://www.cnblogs.com/lhb ...

  9. BootStrap的栅格式布局

    1.栅格系统(布局) Bootstrap内置了一套响应式.移动设备优先的流式栅格系统,随着屏幕设备或视口(viewport)尺寸的增加,系统会自动分为最多12列. 我在这里是把Bootstrap中的栅 ...

随机推荐

  1. perl unload utf-8 oracle 数据库

    perl unload utf-8 Oracle [oracle@oadb sbin]$ sqlplus / as sysdba SQL*Plus: Release 11.2.0.4.0 Produc ...

  2. WebView 和Animation冲突

    当有WebView时,可能会出现 动画没有执行过程. 解决方法: child.setLayerType(View.LAYER_TYPE_HARDWARE, null); child.setAnimat ...

  3. 【canvas】伸缩 / 剪裁 / 文本 / 阴影 / 填充图案 / 填充渐变

    <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8& ...

  4. JBPM4.4部署到tomcat6异常解决办法

    java.lang.LinkageError: loader constraint violation: when resolving interface method "javax.ser ...

  5. 【转】Valid signing identity not found解决办法（原有IDP私钥丢失）及Certificate、App ID、Devices、Provisioning Profiles之间区别--不错

    原文网址:http://blog.csdn.net/mad1989/article/details/8699147 前言: 刚刚把mini换成了macbookair,之前一直在mini上进行开发,到换 ...

  6. [NOIP2007]奖学金

      题目来源:http://www.luogu.org/problem/show?pid=1093# 2007年NOIP全国联赛普及组 [题目描述 Description] 某小学最近得到了一笔赞助, ...

  7. 一起来说 Vim 语

    作为一款古老而具有持久生命力的编辑器,vim 自有它的强大之处.很多人觉得 Vim 的学习曲线太陡峭了,为了能够把 Vim 用得风生水起,不得不记忆大量的命令.如果你是 Vim 新手,刚入门就开始面对 ...

  8. Spark history-server 配置 ！运维人员的强大工具

    spark  history Server产生背景 以standalone运行模式为例,在运行Spark Application的时候,Spark会提供一个WEBUI列出应用程序的运行时信息:但该WE ...

  9. Log接口的重新封装

    闲来没事,看见当前的项目的日志形式有点冗余,每个类都需要声明确实有点繁琐, 因此重新将logback重新封装一下,供整个工程共享使用,版本是1.0.9. 代码如下: import java.lang. ...

  10. 用slf4j统一管理日志总结

    用slf4j统一管理日志总结 参考网页:http://www.slf4j.org/ 一．使用slf4j统一管理并配置统一使用log4j日志 使用的jar:(slf4j-api-1.7.5.jar,jc ...