【Bootstrapt】offset、push、pull
实现方式的区别:
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的更多相关文章
- 【Android】【录音】Android录音--AudioRecord、MediaRecorder
[Android][录音]Android录音--AudioRecord.MediaRecorder Android提供了两个API用于实现录音功能:android.media.AudioRecord. ...
- riot.js教程【三】访问DOM元素、使用jquery、mount输入参数、riotjs标签的生命周期
前文回顾 riot.js教程[二]组件撰写准则.预处理器.标签样式和装配方法 riot.js教程[一]简介 访问DOM元素 你可以通过this.refs对象访问dom元素 而且还有大量的属性简写方式可 ...
- Nginx-rtmp模块实现流媒体play、push、pull功能
官方wiki:https://github.com/arut/nginx-rtmp-module#readme Nginx rtmp 功能特点 1. 支持音视频直播 2. 支持flv/mp4视 ...
- 【Bootstrap】一个兼容IE8、谷歌等主流浏览器的受众门户式风格页面
上一次写的<[Bootstrap]一个兼容IE8.谷歌等主流浏览器的受众巨幕式风格页面>(点击打开链接) 部分老一辈的需求可能对这样的后现代的风格并不惬意, 没关系,我们全然能够改变布局 ...
- 【转】C#中的==、Equal、ReferenceEqual
[转]C#中的==.Equal.ReferenceEqual 转载自: http://www.cnblogs.com/zagelover/articles/2741409.html 1. Refere ...
- 【转】php 之 array_filter、array_walk、array_map的区别
[转]php 之 array_filter.array_walk.array_map的区别 原文:https://blog.csdn.net/csdnzhangyiwei/article/detail ...
- 【Android】自己定义View、画家(画布)Canvas与画笔Paint的应用——绘图、涂鸦板app的实现
利用一个简单的绘图app来说明安卓的图形处理类与自己定义View的应用. 例如以下图,有一个供用户自己随意绘图.涂鸦的app. 这里不做那么花俏了,仅提供黑白两色.但能够改变笔尖的粗细. 实质上这里的 ...
- 【入门】广电行业DNS、DHCP解决方案详解(三)——DNS部署架构及案
[入门]广电行业DNS.DHCP解决方案详解(三)——DNS部署架构及案 DNS系统部署架构 宽带业务DNS架构 互动业务DNS架构 案例介绍 案例一 案例二 本篇我们将先介绍DNS系统部署架构体系, ...
- 【jvm】07-偏向锁、轻量锁、重量锁到底是啥?
[jvm]07-偏向锁.轻量锁.重量锁到底是啥? 欢迎关注b站账号/公众号[六边形战士夏宁],一个要把各项指标拉满的男人.该文章已在github目录收录. 屏幕前的大帅比和大漂亮如果有帮助到你的话请顺 ...
随机推荐
- python环境变量
下载并升级更新pip python -m pip install -U pip 变量名:PY_HOME 变量值:python路径 path:win10加在最后(记得用;号隔开):win7加在前面记 ...
- 改计算机名导致 Oracle因目标主机或对象不存在
手贱修改了计算机名, 结果导致登陆oracle数据库报如下错误,一查资料,说是修改了计算机名导致的,需要进到oracle安装目录: \oracle\product\10.2.0\db_1\NETWOR ...
- pyCharm和解释器下载安装
参考:(mac) 安装流程和注意: http://blog.csdn.net/limin2928/article/details/69267184 解释器下载地址: https://www.pytho ...
- iis7反向代理
很多站长通常在Linux系统下使用nginx作为前端server,通过反向代理间接访问其他webserver.那么如果用户安装的是Windows系统的话,又改如何实现反向代理的设置呢?搜索引擎大全 下 ...
- C#正则表达式将html代码中的所有img标签提取
/// <summary> /// 取得HTML中所有图片的 URL. /// </summary> /// <param name="sHtmlText&qu ...
- window 安装iis和使用
一.IIS安装(服务名World Wide Web Publishing Service) 实验环境:win2008R2虚拟机1.首先打开虚拟机,然后选中管理工具->服务器管理器. 2.选中角色 ...
- 二次封装arcgis的timeslider
arcgis的timeslider是对dojo slider二次封装,项目需要,所有Map用统一样式的slider,所以写了一个common的dojo class,统一调用生成slider,作为对ti ...
- PHP缓存技术OB系统函数(总结)
PHP缓存技术OB系统函数(总结) 一.总结 一句话总结: ob相比于php普通的文件操作多了缓存机制,所以适合做php的页面静态缓存 1.为什么php使用ob做静态文件缓存? 解决header()报 ...
- Where should I put <script> tags in HTML markup?
Where should I put <script> tags in HTML markup? When embedding JavaScript in an HTML document ...
- xcode安装pod
参考了: https://blog.csdn.net/AugustDY/article/details/92078639 输入 ruby -v ,查看当前电脑的ruby版本,如果已经安装了ruby环境 ...