栅格系统
一 概念
#### 1、概念
```
将父级可用宽度(content)均分为12等份
```
#### 2、列比
- 超小屏幕：.col-xs-*
- 小屏幕：.col-sm-*
- 中等屏幕：.col-md-*
- 大屏幕：.col-lg-*
###### v-hint：只设置小屏列比会影响大屏列比；只设置大屏列比小屏时会撑满屏幕
#### 3、行
```html
<div class="row"></div>
...
<div class="row"></div>
```
#### 4、列偏移
- 超小屏幕：.col-xs-offset-*
- 小屏幕：.col-sm-offset-*
- 中等屏幕：.col-md-offset-*
- 大屏幕：.col-lg-offset-*二 代码示范
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>栅格系统</title>
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<link rel="stylesheet" type="text/css" href="bootstrap-3.3.7-dist/css/bootstrap.css">
<style type="text/css">
.container-fluid {
padding: 0;
}
div[class*='col-'] {
background-color: cyan;
/*border: 1px solid black;*/
padding: 0;
}
.container div[class*='col-'] {
height: 500px;
}
.md-3-box,
.md-6-box {
width: auto;
height: 100%;
background-color: #6a6;
}
.row {
padding: 0 15px;
margin-bottom: 10px;
}
div.center {
padding: 0 10px;
}
</style>
</head>
<body>
<div class="container-fluid">
<div class="row">
<!-- 只规定最大尺寸比例时,小屏时撑满父级 -->
<div class="col-lg-6">呵呵</div>
</div>
<div class="row">
<!-- 只规定小屏比例时,比该屏大时的占比等于该屏下的占比 -->
<!-- 规定了md,lg下与md相同,xs,sm撑满父级 -->
<div class="col-md-6">嘻嘻</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-3">
<div class="md-3-box"></div>
</div>
<div class="col-md-6 center">
<div class="md-6-box"></div>
</div>
<div class="col-md-3">
<div class="md-3-box"></div>
</div>
</div>
<div class="row" style="padding: 0 50px;">
<div class="col-md-3">
<div class="md-3-box"></div>
</div>
<div class="col-md-6 center">
<div class="md-6-box"></div>
</div>
<div class="col-md-3">
<div class="md-3-box"></div>
</div>
</div>
<div class="row">
<div class="col-md-4 col-md-offset-4"></div>
</div>
</div>
</body>
<script src="bootstrap-3.3.7-dist/js/jquery-3.3.1.min.js"></script>
<script src="bootstrap-3.3.7-dist/js/bootstrap.js"></script>
</html>
