理解了栅格化,那么栅格偏移也相对容易理解了。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. 火车车次查询-余票查询--Api接口

    1.来自12306的火车车次数据 使用12306网站的接口,查询余票.此接口采集自 这里. 全国火车站代号字典,下载 . 火车票余票查询 http://dynamic.12306.cn/otsquer ...

  2. 计算机中的大小端模式及C语言中如何鉴别他们

    我的博客:www.while0.com 参考http://blog.csdn.net/ce123_zhouwei/article/details/6971544 写的很详细. 大小端主要是对数字类型来 ...

  3. XtraForm中更换皮肤

    前提: 默认皮肤的显示http://www.cnblogs.com/chucklu/p/4785572.html 1.修改XtraForm的LookAndFeel的SkinName属性,设置为Cara ...

  4. Continue 的应用(暂时还不大会运用)

    static void Main(string[] args)        {            while (true)            {                        ...

  5. Selenium - WebDriver 小结(1)

    public class Base { SimpleDateFormat formatterTime = new SimpleDateFormat("yyyyMMdd_hhmmssa&quo ...

  6. JS小知识点----基本包装类型和引用类型

    var s1 = "some text"; s1.color = "red"; alert(s1.color);  //弹出 underfined var s1 ...

  7. Oracle创建表空间、创建用户、授权用户、导入dmp备份语句

    create tablespace TOPSCF_CHS_TS datafile 'D:\TableSpace\TOPSCF_CHS_TS.dbf' size 512M  extent managem ...

  8. MongDB主从复制、复制集

    主从复制比较简单,指定master.slave即可,其中master可写可读.slave只能读不能写.向master插入数据时,mongodb会自动将数据复制到slave节点.这样做的好处是读写分离, ...

  9. PC-全国的 DNS服务商

    我们请选第2个.然后根据自己的省市来填写..我复制了下版主给的网站 北京:202.96.199.133 202.96.0.133 202.106.0.20 202.106.148.1 202.97.1 ...

  10. 8-7-Exercise

    链接:第二次小练 这次是我们这组出的题目~我出了一道......B-Prison rearrangement,感觉有点复杂~不过其实题目想通了还是很简单的...... @荆红浅醉出的是A.C.D,@从 ...