bootstrap之栅格布局使用技巧一
1、栅格布局基本的概念在这就不多介绍，相信很多猿友在网上可以看到很多大神写的文章。
2、我要说的是怎么使用栅格布局，我们都知道bootstrap栅格布局是一行12列。
每列是相等的。也就是col-xx-x
3、有的时候我们在拿到设计图的是时候，设计师设计的布局，并不能跟col-xx-x相等，此时我们需要在col-xx-x里面添加一个类，给这个类一个padding值，那边需要宽度，我们就给那边，这样我们就把盒子内部的空间给压缩了，当然了，我们在布局的时候，首先需要大致规划一下，该盒子所需要的分数，然后在进行设置col-xx-x.然后在里面规划内容所需要的空间。这样我们就可以做到知己知彼。
4、我们在布局每一个col-xx-x的时候可以现在里面在套一个盒子。在这个盒子中做我们事情，不管我们是添加边框，还是添加阴影，这对我们的外部都是没有影响的。
####
测试代码 ：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8" />
<!-- 视口 -->
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>基本模板</title>
<link rel="stylesheet" href="bootstrap/css/bootstrap.css" />
<style>
.container {
border: 1px solid #000;
}
.son {
border: 1px solid red;
height: 100px;
}
.box {
border: 1px solid #000;
/* padding: 0 40px; */
/* padding-left: 30px; */
}
</style>
</head>
<body>
<!--
需求: 12 个 div
如果是大屏幕设备, 每行放 6 个 div
如果是中屏设备, 每行放 4 个 div
如果是小屏设备, 每行放 3 个 div
如果是超小屏设备, 每行放 2 个 div
-->
<!-- 响应式版心 -->
<div class="container">
<div class="son col-lg-2 col-md-3 col-sm-4 col-xs-6">
<div class="box">111111</div>
</div>
<div class="son col-lg-2 col-md-3 col-sm-4 col-xs-6">
<div class="box">222222</div>
</div>
<!--
<div class="son col-lg-2 col-md-3 col-sm-4 col-xs-6">33333</div>
<div class="son col-lg-2 col-md-3 col-sm-4 col-xs-6">44444</div>
<div class="son col-lg-2 col-md-3 col-sm-4 col-xs-6">55555</div>
<div class="son col-lg-2 col-md-3 col-sm-4 col-xs-6">66666</div>
<div class="son col-lg-2 col-md-3 col-sm-4 col-xs-6">77777</div>
<div class="son col-lg-2 col-md-3 col-sm-4 col-xs-6">88888</div>
<div class="son col-lg-2 col-md-3 col-sm-4 col-xs-6">99999</div>
<div class="son col-lg-2 col-md-3 col-sm-4 col-xs-6">22222</div>
<div class="son col-lg-2 col-md-3 col-sm-4 col-xs-6">33333</div>
<div class="son col-lg-2 col-md-3 col-sm-4 col-xs-6">44444</div>
-->
</div>
<script src="./jquery.min.js"></script>
<script src="bootstrap/js/bootstrap.js"></script>
</body>
</html>
更多精彩内容请点击 ：前端Tree
