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

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. git快速入门 push/clone/reset/merge/切换分支全都有

    本文介绍git快速入门,从安装/创建init / 发布push/版本回退reset / branch分支切换/合并分支merge 这些基本的操作都有涉及,方便新人快速入手,有需要的朋友mark一下.首 ...

  2. 对innodb_flush_log_at_commit参数的写日志和刷盘行为进行图解

    对innodb_flush_log_at_commit参数的写日志和刷盘行为进行图解

  3. git pull报错,error: cannot lock ref导致拉流失败

    使用git命令删除相应refs文件,git update-ref -d refs/remotes/XXX,或者手动删除文件 简单粗暴强行git pull,执行git pull -p 原文:https: ...

  4. PAT 1070 Mooncake[一般]

    1070 Mooncake (25)(25 分) Mooncake is a Chinese bakery product traditionally eaten during the Mid-Aut ...

  5. [LeetCode] 161. One Edit Distance_Medium

    Given two strings s and t, determine if they are both one edit distance apart. Note: There are 3 pos ...

  6. jstat命令查看tomcat进程提示进程没找到(PID not found

    今天遇到了一个小问题,我想用jstat命令查看tomcat进程(PID=24493)的内存使用情况,命令如下:jstat -gc 24493. 然后就报错了,错误提示信息为 24493 not fou ...

  7. windows系统bat方式启动tomcat出现java.lang.OutOfmemoryError:PermGen Space 错误

    1.问题情景: 在部署项目时,将两个应用部署到同一个tomcat下,通过startup.bat启动服务时,控制台出现出现java.lang.OutOfmemoryError:PermGen Space ...

  8. linux常用命令:netstat 命令

    netstat命令用于显示与IP.TCP.UDP和ICMP协议相关的统计数据,一般用于检验本机各端口的网络连接情况.netstat是在内核中访问网络及相关信息的程序,它能提供TCP连接,TCP和UDP ...

  9. python选择排序算法总结

    选择排序算法: a=[6,5,4,3,2,1] 算法思路: 第一步:在列表的第一个位置存放此队列的最小值 声明一个变量min_index等于列表的第一个坐标值0 从第一个位置0坐标开始,和它后边所有的 ...

  10. tomcat警告WARNING: An attempt was made to authenticate the locked user "user"

    后台出现很多警告WARNING: An attempt was made to authenticate the locked user "user"Jul 19, 2017 2: ...