<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>bootstrap基础</title>
<link rel="stylesheet" href="dist/css/bootstrap.css">
<script src="dist/js/jquery-3.2.1.min.js"></script>
<script src="dist/js/bootstrap.js"></script>
<style>
.grid{
border:1px solid #aaa;
background-color: skyblue;
}
.orange{
border:1px solid #aaa;
background-color: orange;
}
.green{
border:1px solid #aaa;
background-color: #59d200;
}
</style>
</head>
<body>
<div>
<!-- 偏移相当于添加了透明的栅格 -->
<h2>列偏移前</h2>
<div>
<div class="col-sm-4 grid">444</div>
<div class="col-sm-4 green">444</div>
</div>
<h2>列偏移后</h2>
<div>
<div class="col-sm-4 col-md-offset-1 grid">444</div>
<div class="col-sm-4 col-md-offset-3 green">444</div>
</div>
</div>
<div>
<!-- 在每列中继续添加行，以父列为12等分 -->
<h2>列嵌套前</h2>
<div>
<div class="col-sm-4 grid">444</div>
<div class="col-sm-4 green">444</div>
<div class="col-sm-4 green">444</div>
</div>
<h2>列嵌套后</h2>
<div>
<div class="col-sm-4 grid">444
<div>
<div class="col-sm-4 orange">444</div>
<div class="col-sm-4 green">444</div>
<div class="col-sm-4 orange">444</div>
</div>
</div>
<div class="col-sm-4 green">444
<div>
<div class="col-sm-4 orange">444</div>
<div class="col-sm-4 grid">444</div>
<div class="col-sm-4 orange">444</div>
</div>
</div>
</div>
</div>
<div>
<!-- 排序，相对于原来的位置 -->
<h2>列排序前</h2>
<div>
<div class="col-sm-6 grid">6666</div>
<div class="col-sm-4 green">4444</div>
<div class="col-sm-2 orange">2222</div>
</div>
<h2>列排序后</h2>
<div>
<div class="col-sm-6 col-sm-push-6 grid">6666</div>
<div class="col-sm-4 col-sm-pull-4 green">4444</div>
<div class="col-sm-2 col-sm-pull-10 orange">2222</div>
</div>
</div>
</body>
</html>
博客列表 >bootstrap列偏移，列嵌套，列排序
bootstrap列偏移，列嵌套，列排序
- yestrue的博客原创转载
- 2017年12月26日 03:06:42943浏览
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议
