偏移是一个用于更专业的布局的有用功能。它们可用来给列腾出更多的空间。例如,.col-xs-* 类不支持偏移,但是它们可以简单地通过使用一个空的单元格来实现该效果。
为了在大屏幕显示器上使用偏移,请使用 .col-md-offset-* 类。这些类会把一个列的左外边距(margin)增加 * 列,其中 * 范围是从 1 到 11。
在下面的实例中,我们有 <div class="col-md-6">..</div>,我们将使用 .col-md-offset-3 class 来居中这个 div。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Bootstrap 实例 - 偏移列</title>
<link rel="stylesheet" href="https://cdn.staticfile.net/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.staticfile.net/jquery/2.1.1/jquery.min.js"></script>
<script src="/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h1>Hello, world!</h1>
<div class="row" >
<div class="col-md-6 col-md-offset-3"
style="background-color: #dedef8;box-shadow:
inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing
elit.
</p>
</div>
</div>
</div>
</body>
</html>
[ 视频安全 ] 相关原创文章
- 教育教学类视频如何处理加密与安全(组图)
- 防止360浏览器小窗下载视频
- 视频安全之视频播放密码功能(设置观看密码功能教程)
- 视频安全之授权播放和防录屏跑马灯
- 企业级微信视频直播如何设定观看白名单(设定手机观看白名单、授权观看直播)
- 在线教育网站如何更好的实现视频安全视频保护?
- 免费视频二维码的完整使用教程(适合小企业做微信视频宣传)
- Html5视频video标签中使用blob实现视频播放加密
[ 视频直播 ] 相关原创文章
- 云直播客户端4.0活动拍摄类直播与教学培训类直播测试
- 视频直播画中画效果(边角叠加、去背景、并列布局三种效果)
- 做视频直播时如何测试本地网络的上行带宽(网速测试)
- 在线导播台(网页导播台)混流效果
- 云课堂直播功能介绍,更贴合在线教育、企业内训的场景应用
- 微信公众号直播有哪些不一样的玩法?
- 企业年会活动常用的音频类、视频类工具软件