本文为博主原创,转载请注明出处:

offset偏移都是向右偏移,且只能向右偏移,例:

col-md-offset-2,向右偏移两列。

col-md-pull-偏移数值         //向左偏移

col-md-push-偏移数值         //向右偏移

col-md-offset-数据和col-md-push-数值的区别:

实现方式的区别:col-md-offset-*,是利用margin-left实现的,col-md-push-*/col-md-pull-*是利用相对定位实现的。

效果的区别,col-md-offset-*只能向右便宜,因为实现方式就是margin-left,而push/pull因为是相对定位,既可以左偏移也可以右偏移

还有一点,如果一行的偏移量+实际的宽度综合超过12,col-md-offset会换行显示,也是因为margin,而push/pull只会一部分不可见(超出容器),因为是相对自身定位。

从功能上来看,push和pull可以用来给元素换位置,比较灵活。

在使用过程中,col-md-push-偏移数值使用比较方便我觉得。推荐使用这个方式进行偏移。

bootstrap栅格系统进行偏移格式的更多相关文章

  1. 入门——Bootstrap栅格系统

    作为刚接触到Bootstrap框架的新手一枚,刚开始对Bootstrap中的栅格系统一脸懵逼,后来经过反复的上网查找资料以及自己一直在练习,总算对栅格系统了解个差不多,所以我将我所了解的当成是日记写下 ...

  2. Bootstrap栅格系统基本使用

    1.什么是栅格系统: 在Bootstrap中,它提供了一套响应式.移动设备优先的流式栅格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列.栅格系统用于通过一系列的行(row ...

  3. Bootstrap 栅格系统(转载)

    源地址:http://www.cnblogs.com/linjiqin/p/3559800.html Bootstrap 栅格系统 目录1.简介2.栅格选项3.列偏移4.嵌套列5.列排序 1.简介Bo ...

  4. 初学bootstrap ---栅格系统

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. 巧用 BootStrap --- 栅格系统(布局)轻松搞定网页响应式布局!

    摘要:Bootstrap 为我们提供了一套响应式.移动设备优先的流式栅格系统,合理的使用栅格系统将会使得网站页面布局变得更加简单,在设置了媒体查询之后,响应式网站也无需再单独写了.接下来我以Boots ...

  6. Bootstrap 栅格系统初识

    以下理论内容copy自bootstrap中文网(一个不错的bootstrap学习网站). 栅格系统 Bootstrap 提供了一套响应式.移动设备优先的流式栅格系统,随着屏幕或视口(viewport) ...

  7. 第二百三十五节,Bootstrap栅格系统

    Bootstrap栅格系统 学习要点: 1.移动设备优先 2.布局容器 3.栅格系统 本节课我们主要学习一下 Bootstrap 的栅格系统,提供了一套响应式.移动设备优先的流 式栅格系统. 一.移动 ...

  8. bootstrap栅格系统的使用

    bootstrap栅格系统的使用 bootstrap栅格系统的使用,主要分为四种方式 1.列组合  col-md-* 2.列偏移 col-md-offset-* 3.列嵌套  大列组合包含着小组合 4 ...

  9. Bootstrap栅格系统详解,响应式布局

    Bootstrap栅格系统详解 栅格系统介绍 Bootstrap 提供了一套响应式.移动设备优先的流式栅格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列. 栅格系统用于通 ...

随机推荐

  1. GitLab修改时区

    https://yq.aliyun.com/articles/275765 一.背景 今天有同事在GitLab上查看时间的时候,发现GitLab上显示的时间和提交的时间不一致. 本地时间现在为:201 ...

  2. InnoSQL HA Suite的实现原理与配置说明 InnoSQL的VSR功能Virtual Sync Replication MySQL 5.5版本引入了半同步复制(semi-sync replicaiton)的功能 MySQL 5.6支持了crash safe功能

    InnoSQL HA Suite的实现原理与配置说明  InnoSQL的VSR功能Virtual Sync Replication MySQL 5.5版本引入了半同步复制(semi-sync repl ...

  3. Scala集合类详解

    对scala中的集合类虽然有使用,但是一直处于一知半解的状态.尤其是与java中各种集合类的混合使用,虽然用过很多次,但是一直也没有做比较深入的了解与分析.正好趁着最近项目的需要,加上稍微有点时间,特 ...

  4. PAT 1066 Root of AVL Tree[AVL树][难]

    1066 Root of AVL Tree (25)(25 分) An AVL tree is a self-balancing binary search tree. In an AVL tree, ...

  5. MVC5 新建项目里不包含jquery.unobtrusive-ajax.js(MVC5异步表单的问题)解决方法

    Asp.NET MVC 5 高级编程第5版.pdf 中有解决方法: 用NUGET程序包管理器控制台安装下面这两个文件 Install-Package jQuery –version 1.10.2 In ...

  6. unity3d-Visual Studio Tools for Unity快捷键

    1.首先 当安装for unity 后,打开vs2013(我使用的是vs2013),右键可以看到for unity 提供了两个快捷键 2.其次 (Ctrl+Shift+M) 3.最后(Ctrl+Shi ...

  7. c++中的构造(包括移动),赋值(包括移动),析构详解

    这五种操作:构造(包括移动),赋值(包括移动),析构其实就是定义了对一个对象进行构造,赋值,析构时的行为.理解这些行为并不复杂,复杂的是理解在继承下这些行为的表现.需要注意的是他们并不会被继承(传统意 ...

  8. MFC六大核心机制之五、六:消息映射和命令传递

    作为C++程序员,我们总是希望自己程序的所有代码都是自己写出来的,如果使用了其他的一些库,也总是千方百计想弄清楚其中的类和函数的原理,否则就会感觉不踏实.所以,我们对于在进行MFC视窗程序设计时经常要 ...

  9. MYSQL的存储过程和函数简单写法

    存储过程 MySQL中,创建存储过程的基本形式如下: CREATE PROCEDURE sp_name ([proc_parameter[,...]]) [characteristic ...] ro ...

  10. 01: 企业微信API开发前准备

    目录:企业微信API其他篇 01: 企业微信API开发前准备 02:消息推送 03: 通讯录管理 04:应用管理 目录: 1.1 术语介绍 1.2 开发步骤 1.1 术语介绍返回顶部 参考文档:htt ...