【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目录收录. 屏幕前的大帅比和大漂亮如果有帮助到你的话请顺 ...
随机推荐
- c++ 递归思想 阶乘
#include "stdio.h" #include "iostream" long fact(int n); int main() { int i; sca ...
- LOJ 3092 「BJOI2019」排兵布阵 ——DP
题目:https://loj.ac/problem/3092 同一个人的不同城堡之间没有什么联系,只是和<=m.所以对每个城堡的 s 个值排序,做一个 f[ i ][ j ] 表示第 i 个城堡 ...
- LintCode之合并排序数组
题目描述: 我的代码: public class Solution { /* * @param A: sorted integer array A * @param B: sorted integer ...
- docker 部署netcore 的关键语句
网站容器:docker run -it --name myTestWeb -p 8080:80 -v /mnt/hgfs/my_share/core/website/:/website microso ...
- offsetleft 和 style.left 的区别
offsetLeft 获取的是相对于父对象的左边距: left 获取或设置相对于 具有定位属性(position定义为relative)的父对象 的左边距: 如果父div的position定义为rel ...
- 封装token
let baseApiUrl = 'xxxx' var app = getApp(); let defaultHeaders = { 'Content-Type': 'application/json ...
- latex的资料ftp
ftp://ftp.tex.ac.uk/ctan/tex-archive/ ftp ftp.tex.ac.uk anonymous ls
- c#生成html静态文件时出现空白行,怎么去掉utf-8中的bom
public static void UTF8RemoveBOM(string filepath) { UTF8RemoveBOM(filepath, filepath); } public st ...
- 《穷爸爸富爸爸——Cashflow》
读<穷爸爸富爸爸>大约两年前了,当时对理财没什么概念,除了支付宝,就是京东小金库,哪个利率高就存哪个里.记忆中除了感觉这应该是有一定经济基础的人通常做的事,工薪阶级的自己还未达标,工资除了 ...
- Vue是如何渲染页面的,渲染过程以及原理代码
Vue是如何渲染页面的,渲染过程以及原理代码:https://www.cnblogs.com/ypinchina/p/7238402.html