实现方式的区别:

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

效果的区别:

col-md-offset-*只能向右偏移(margin-left),而push(float:right)/pull(float:left)因为是相对定位,既可以左偏移也可以右偏移

注意:

如果一行的偏移量实际的宽度综合超过12,col-md-offset会换行显示,也是因为margin,而push/pull只会一部分不可见(超出容器),因为是相对自身定位。
从功能上来看,push和pull可以用来给元素换位置,比较灵活。
 
 

col-md-offset实现div居中

<div class="container">
<h1>Hello, world!</h1>
<div class="row" >
<div class="col-md-6 col-md-offset-3" style="background-color: #dedef8;">
<p>中华民族</p>
</div>
</div>
</div>

具体查看api:https://www.runoob.com/bootstrap/bootstrap-grid-system.html

【Bootstrapt】offset、push、pull的更多相关文章

  1. 【Android】【录音】Android录音--AudioRecord、MediaRecorder

    [Android][录音]Android录音--AudioRecord.MediaRecorder Android提供了两个API用于实现录音功能:android.media.AudioRecord. ...

  2. riot.js教程【三】访问DOM元素、使用jquery、mount输入参数、riotjs标签的生命周期

    前文回顾 riot.js教程[二]组件撰写准则.预处理器.标签样式和装配方法 riot.js教程[一]简介 访问DOM元素 你可以通过this.refs对象访问dom元素 而且还有大量的属性简写方式可 ...

  3. Nginx-rtmp模块实现流媒体play、push、pull功能

    官方wiki:https://github.com/arut/nginx-rtmp-module#readme Nginx rtmp 功能特点 1.   支持音视频直播 2.   支持flv/mp4视 ...

  4. 【Bootstrap】一个兼容IE8、谷歌等主流浏览器的受众门户式风格页面

    上一次写的<[Bootstrap]一个兼容IE8.谷歌等主流浏览器的受众巨幕式风格页面>(点击打开链接) 部分老一辈的需求可能对这样的后现代的风格并不惬意, 没关系,我们全然能够改变布局 ...

  5. 【转】C#中的==、Equal、ReferenceEqual

    [转]C#中的==.Equal.ReferenceEqual 转载自: http://www.cnblogs.com/zagelover/articles/2741409.html 1. Refere ...

  6. 【转】php 之 array_filter、array_walk、array_map的区别

    [转]php 之 array_filter.array_walk.array_map的区别 原文:https://blog.csdn.net/csdnzhangyiwei/article/detail ...

  7. 【Android】自己定义View、画家(画布)Canvas与画笔Paint的应用——绘图、涂鸦板app的实现

    利用一个简单的绘图app来说明安卓的图形处理类与自己定义View的应用. 例如以下图,有一个供用户自己随意绘图.涂鸦的app. 这里不做那么花俏了,仅提供黑白两色.但能够改变笔尖的粗细. 实质上这里的 ...

  8. 【入门】广电行业DNS、DHCP解决方案详解(三)——DNS部署架构及案

    [入门]广电行业DNS.DHCP解决方案详解(三)——DNS部署架构及案 DNS系统部署架构 宽带业务DNS架构 互动业务DNS架构 案例介绍 案例一 案例二 本篇我们将先介绍DNS系统部署架构体系, ...

  9. 【jvm】07-偏向锁、轻量锁、重量锁到底是啥?

    [jvm]07-偏向锁.轻量锁.重量锁到底是啥? 欢迎关注b站账号/公众号[六边形战士夏宁],一个要把各项指标拉满的男人.该文章已在github目录收录. 屏幕前的大帅比和大漂亮如果有帮助到你的话请顺 ...

随机推荐

  1. Spring学习总结(2)- AOP

    一,什么是AOP AOP(Aspect Oriented Programming)意为:面向切面编程,通过预编译方式和运行期动态代理实现程序功能的统一维护的一种技术.AOP是OOP的延续,是软件开发中 ...

  2. 4412 搭建和测试NFS服务器

    一.NFS网络文件系统 NFS是Network FileSystem的缩写,NFS是基于UDP/IP协议的应用.它的最大功能就是可以通过网络让不同的机器,不通的操作系统彼此共享文件, 可以通过NFS挂 ...

  3. 前端每日实战:38# 视频演示如何用纯 CSS 创作阶梯文字特效

    效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/MXYBEM 可交互视频教程 此视频 ...

  4. 【前端技术】一篇文章搞掂:微信小程序

    实战: 1.[openId]获取openId 有如下几种方法: 通过wx.login()获取临时登录凭证 code,然后通过code2session获取openId wx.login():https: ...

  5. XScreenSaver强大的锁屏工具

    source install:  https://www.jwz.org/xscreensaver/ XScreenSaver     Related articles DPMS Xresources ...

  6. JetBrains CLion

    JetBrains CLion 2017.2.4 ①.激活时选择License server: http://idea.irfen.me/ http://idea.imsxm.com/

  7. 建议66,67 注意Arrays.asList()的使用

    代码 public static void main(String[] args) { int[]data = {1,2,3,4,5}; List list = Arrays.asList(data) ...

  8. PAT甲级——A1155 HeapPaths【30】

    In computer science, a heap is a specialized tree-based data structure that satisfies the heap prope ...

  9. 开发环境绑定host vue 返回 invalid host header

    事情:使用域名绑定host为本机电脑ip,vue返回 invalid host header 原因:新版的webpack-dev-server出于安全考虑,默认检查hostname,如果hostnam ...

  10. springCloud的使用05-----路由网关(zuul)

    zuul的主要功能是路由转发和过滤,比如让所有/api-a/*的请求都转发到服务器a上,所有/api-b/*的请求都转发到服务器b上,zuul默认和ribbon结合实现了负载均衡的功能. 1 zuul ...