理解了栅格化,那么栅格偏移也相对容易理解了。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. WebX配置文件、启动与响应流程

    ** 最近几天一直在看Spring的Ioc和AOP的源码介绍,还有Webx的使用.看Spring的源代码让人眼花缭乱,webx的配置文件也会让人感觉错综复杂无从下手.今天把之前看到的想到的webx相关 ...

  2. USACO3.42American Heritage(二叉树)

    已知中前 求后序 递归一下 有一些小细节 /* ID: shangca2 LANG: C++ TASK: heritage */ #include <iostream> #include& ...

  3. bzoj3876

    不高兴的回忆啊啊啊当初这种简单题因为自己作死就暴零0了这题在OJ上是简单的最小有下界费用流,增广到正费用为止因为算的是总时限但实际的话似乎要用pacman吃豆豆那题的方法先用dp跑出第一次的增广路再用 ...

  4. C# Sending data using GET or POST ZZ

    In this short article, I'll show you how to send data to a website from a C# application using GET o ...

  5. HDU-4300 Clairewd’s message

    http://acm.hdu.edu.cn/showproblem.php?pid=4300 很难懂题意.... Clairewd’s message Time Limit: 2000/1000 MS ...

  6. 【转】QTP书写程序技巧

    一.添加固定注释 新建一TXT文档,将要添加的注释写在文档中 将文档名改为:ActionTemplate.mst 将文件放到QTP安装目录的dat文件夹中 设置好后,在QTP中每次新建一个测试就会自动 ...

  7. CentOS环境下yum安装LAMP(Linux+Apache+Mysql+php)

    CentOS下使用yum命令 安装LAMP详细过程.我们使用的软件是CentOS的最新版本CentOS 6.3,其他版本的也基本类似. 第一步:更新系统内核(如果不想更新可以跳过本步). 首先更新系统 ...

  8. ubuntu 手动添加jar到本地仓库

    前言:maven仓库的下载速度太慢了,而且有些jar不存在,或者加入自己开发的依赖包,还是要学会自己手动加入jar.下面以 javax.servlet-api为例. 1.获取下载的javax.serv ...

  9. wall

    wall 是在linux中用于发送广播信息的命令,他可以让所有的在线用户都收到信息 wall hi 然后,按Ctrl + c 退出

  10. Jquery Mobile左右滑动效果

    首先在一个页面里面定义两个< div data-role="page">,这里为了突出重点,就没有写出footer和header.定义的页面如下: <body&g ...