【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目录收录. 屏幕前的大帅比和大漂亮如果有帮助到你的话请顺 ...
随机推荐
- CentOS7安装配置redis5.0.5
一.安装必需包gcc yum install gcc 二.下载redis,并解压 wget http://download.redis.io/releases/redis-5.0.5.tar.gz t ...
- 最强CP!阿里云联手支付宝小程序如何助力双11?
作为首次“全面上云”的双11,阿里云征服了每秒订单峰值54.4万笔的世界新记录.正是在阿里云的保驾护航下,即使访问量是平时的5到6倍,小程序也鲜少出现卡顿或者宕机的现象,“依靠阿里云,我们整个天猫双1 ...
- 【Java】定义Logger为什么要用static和final?
private static final Logger logger= LoggerFactory.getLogger(ShiroConfig.class); (1)出于资源利用的考虑,Logger的 ...
- LOJ 2541 「PKUWC2018」猎人杀——思路+概率+容斥+分治
题目:https://loj.ac/problem/2541 看了题解才会……有三点很巧妙. 1.分母如果变动,就很不好.所以考虑把操作改成 “已经选过的人仍然按 \( w_i \) 的概率被选,但是 ...
- window安装consul
安装consul 下载包: https://www.consul.io/ 解压 consul_1..2_windows_amd64.zip 复制 consul.exe 到 d:\soft\consul ...
- Windows-Windows下使用Linux系统(WSL)
Install Windows Subsystem for Linux (WSL) on on Windows 10 | Microsoft Docs WSL(Windows Subsystem fo ...
- vue搭建项目步骤(二)
上篇是搭建Vue项目的基本,接下来是继续对做项目的记录.顺序并不一定. 五.对页面入口文件的修改: 众所周知,main.js 程序入口文件,加载各种公共组件,App.Vue为 页面入口文件.但是有时候 ...
- 深入了解JAVA基础(面试)
I.常用类型与编码类问题: 1.Java中的基本类型有什么? byte.short.int.long.float.double.chart.boolean这八种,这 ...
- Django--Aadmin入门
- python 类和对象上
面向对象 Object Oriented 面向对象的学习: 面向对象的语法(简单,记忆就可以搞定) 面向对象的思想(稍难,需要一定的理解) 面向过程和面向对象的区别 面向过程开发,以函数作为基本结构使 ...