理解了栅格化,那么栅格偏移也相对容易理解了。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. paip.php eclipse output echo 乱码

    paip.php eclipse output echo 乱码 作者Attilax ,  EMAIL:1466519819@qq.com  来源:attilax的专栏 地址:http://blog.c ...

  2. 17.1 Replication Configuration 复制配置

    17.1 Replication Configuration 复制配置 17.1.1 How to Set Up Replication 17.1.2 Replication Formats 17.1 ...

  3. Codevs_1017_乘积最大_(划分型动态规划/记忆化搜索)

    描述 http://codevs.cn/problem/1017/ 给出一个n位数,在数字中间添加k个乘号,使得最终的乘积最大. 1017 乘积最大 2000年NOIP全国联赛普及组NOIP全国联赛提 ...

  4. 设置Div多行文本超出时,以省略号代替

    这个文章不错 http://www.css88.com/archives/5206 css中有一个属性: text-overflow,可以设置文本超出指定长度后的文本截取样式. 下面是从 w3shco ...

  5. 一些简单的css和js知识

    这几天主要做的是前端网页的调整和页面UI的优化方面的内容.这中间主要是学习了一些基本的HTML和css样式的基本元素的属性.设置行高的line-heght属性,设置窗口的浮动用position属性,设 ...

  6. Apache支持.htaccess配置方法

    打开httpd.conf文件用文本编辑器打开后,查找  代码如下 复制代码 Options FollowSymLinks AllowOverride None 改为: Options FollowSy ...

  7. lost connection to mysql server at "reading initial communication packet",system error:2

  8. 怎样在Yii中显示静态页

    在web应用中,我们经产更需要显示静态页,如“关于我们”等,这些文件通常是静态页,通常有如下几种处理方法: 1.把独立的html文件存在Web服务器能直接访问的目录下.这种方案的缺点是很难维护网页布局 ...

  9. [学习笔记]设计模式之Abstract Factory

    写在前面 为方便读者,本文已添加至索引: 设计模式 学习笔记索引 在上篇笔记Builder设计模式中,时の魔导士祭出了自己的WorldCreator.尽管它因此能创造出一个有山有树有房子的世界,但是白 ...

  10. php 获取某个月的周次信息

    在做统计的时候如果按照周统计 ,需要对某个月的周次信息进行计算,如果本月头一天不是星期一,则向上一个月取周一,本月最后的几天如果不能正好是一周,则忽略. 例如 2019-09月计算出来的结果 2016 ...