内容：
透彻理解Bootstrap栅格布局原理，完成：
1. 列偏移
2. 列嵌套
3. 列排序
收藏
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="dist/css/bootstrap.css">
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="http://apps.bdimg.com/libs/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<title>Title</title>
<style>
.green{
background-color: lightgreen;
min-height: 30px;
border-radius: 5px;
text-align: center;
line-height: 30px;
border: solid 1px black;
}
.blue{
background-color: skyblue;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-sm-6 col-sm-offset-2 green">偏移块1(自身长6偏移2)
<div class="row">
<div class="col-sm-8 green col-sm-push-4">嵌套块1（右移4个栅格）</div>
<div class="col-sm-4 green blue col-sm-pull-8">嵌套块2(左移8个栅格)</div>
</div>
</div>
<div class="col-sm-3 col-sm-offset-1 green blue">偏移块2（自身长3偏移1）</div>
</div>
<div class="row">
<div class=""></div>
</div>
</div>
</body>
</html>最简洁的效果图
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
