【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目录收录. 屏幕前的大帅比和大漂亮如果有帮助到你的话请顺 ...
随机推荐
- mybatis整合redis二级缓存
mybatis默认开启了二级缓存功能,在mybatis主配置文件中,将cacheEnabled设置成false,则会关闭二级缓存功能 <settings> <!--二级缓存默认开启, ...
- 数据流:DataOutputStream与DataInputStream的使用
看这两个类的名字就不难猜测出它们的类关系图. DataOutputStream: 主要是一些writeXxx()操作,写出, 相当于序列化 DataInputStream: 主要是一些readXxx( ...
- Junit单元测试之MockMvc
在测试restful风格的接口时,springmvc为我们提供了MockMVC架构,使用起来也很方便. 下面写个笔记,便于以后使用时参考备用. 一 场景 1 . 提供一个restful风格的接口 im ...
- win 10配置安装iis
站长喜欢本地配置iss调试网站后发布到网上,但是前提是系统得配置好iis.随着Win10的出现,越来越多的人装上了Win10, 但是小编最近发现很多旧版本windows系统用户在升级到windows ...
- UE编辑器
引用ue的js 下载地址http://pan.baidu.com/s/1gdrQ35L <script type="text/javascript" src="__ ...
- 杂项-Map:高德地图
ylbtech-杂项-Map:高德地图 1.返回顶部 1. 开放分类:地图手机软件高德地图(Amap) 是国内一流的免费地图导航产品,也是基于位置的生活服务功能最全面.信息最丰富的手机地图,由国内最大 ...
- 热经-北京中地时空数码科技有限公司-研发工程师(WEBGIS方向)
一面: 登记,填写个人信息 笔试 选择题: HTML,CSS,JS 的选择题,都是基础题.其中有一道问哪个不是 document 的属性或方法,我在 bgColor 和 focus() 上面纠结了一下 ...
- Spring Cloud Gateway注册到服务器中心(Consul)
Spring Cloud Gateway注册到服务器中心(Consul) 准备环境 启动Consul(./consul agent -dev)作为服务中心,默认是8500端口,然后启动spring-c ...
- Fix invisible cursor issue in Ubuntu 13.10
Fix invisible cursor issue in Ubuntu 13.10 Fixing this problem is rather too easy. Open a terminal ( ...
- js 模拟window.open 打开新窗口
为什么要去模拟window.open() 打开一个 新的窗口呢,因为有些浏览器默认会拦截 window.open, 当需要函数中打开新窗口时,接可以使用a标签去模拟打开. /** * a模拟windo ...