释放双眼，带上耳机，听听看~！
我们知道，在使用Bootstrap栅格的时候，我们可以对网页方便的进行模块分割。Bootstrap 包含了一个响应式的、移动设备优先的、不固定的网格系统，可以随着设备或视口大小的增加而适当地扩展到 12 列。
它包含了用于简单的布局选项的预定义类，也包含了用于生成更多语义布局的功能强大的混合类。如果要2等分，使用col-md-6即可；要3等分，使用col-md-4即可；但如果我们要5等分或者8等分怎么办呢？下面的示例是bootstrap五等分布局：
图片.png
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
2<html lang="en">
3
4 <head>
5 <meta charset="UTF-8">
6 <!--视口的设置，让网页能等比例的缩放到对应设备中-->
7 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
8 <!--告诉ie浏览器用最新内核去渲染网页-->
9 <meta http-equiv="X-UA-Compatible" content="ie=edge" />
10 <title>Document</title>
11 <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
12
13 <style type="text/css">
14 .col-xs-1-5,
15 .col-sm-1-5,
16 .col-md-1-5,
17 .col-lg-1-5 {
18 position: relative;
19 min-height: 1px;
20 padding-right: 10px;
21 padding-left: 10px;
22 }
23
24 .col-xs-1-5 {
25 width: 20%;
26 float: left;
27 }
28
29 @media (min-width: 768px) {
30 .col-sm-1-5 {
31 width: 20%;
32 float: left;
33 }
34 }
35
36 @media (min-width: 992px) {
37 .col-md-1-5 {
38 width: 20%;
39 float: left;
40 }
41 }
42
43 @media (min-width: 1200px) {
44 .col-lg-1-5 {
45 width: 20%;
46 float: left;
47 }
48 }
49 </style>
50
51 <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
52 <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
53
54 <body>
55
56 <div class="container">
57 <div class="row">
58 <div class="col-xs-1-5">
59 <div class="items text-center">
60 <img class="img-responsive" src="../img/my.jpg" />
61
62 <div class="row">
63 <div class="name" id="">姓名:<span>王婷</span></div>
64 </div>
65
66 <div class="row">
67 <div class="sex" id="">性别:<span>女</span></div>
68 </div>
69
70 <div class="row">
71 <div class="orgin" id="">部门:<span>宣传部</span></div>
72 </div>
73 </div>
74 </div>
75 <div class="col-xs-1-5">
76 <div class="items text-center">
77 <img class="img-responsive" src="../img/my.jpg" />
78
79 <div class="row">
80 <div class="name" id="">姓名:<span>王婷</span></div>
81 </div>
82
83 <div class="row">
84 <div class="sex" id="">性别:<span>女</span></div>
85 </div>
86
87 <div class="row">
88 <div class="orgin" id="">部门:<span>宣传部</span></div>
89 </div>
90 </div>
91 </div>
92 <div class="col-xs-1-5">
93 <div class="items text-center">
94 <img class="img-responsive" src="../img/my.jpg" />
95
96 <div class="row">
97 <div class="name" id="">姓名:<span>王婷</span></div>
98 </div>
99
100 <div class="row">
101 <div class="sex" id="">性别:<span>女</span></div>
102 </div>
103
104 <div class="row">
105 <div class="orgin" id="">部门:<span>宣传部</span></div>
106 </div>
107 </div>
108 </div>
109 <div class="col-xs-1-5">
110 <div class="items text-center">
111 <img class="img-responsive" src="../img/my.jpg" />
112
113 <div class="row">
114 <div class="name" id="">姓名:<span>王婷</span></div>
115 </div>
116
117 <div class="row">
118 <div class="sex" id="">性别:<span>女</span></div>
119 </div>
120
121 <div class="row">
122 <div class="orgin" id="">部门:<span>宣传部</span></div>
123 </div>
124 </div>
125 </div>
126
127 <div class="col-xs-1-5">
128 <div class="items text-center">
129 <img class="img-responsive" src="../img/my.jpg" />
130
131 <div class="row">
132 <div class="name" id="">姓名:<span>王婷</span></div>
133 </div>
134
135 <div class="row">
136 <div class="sex" id="">性别:<span>女</span></div>
137 </div>
138
139 <div class="row">
140 <div class="orgin" id="">部门:<span>宣传部</span></div>
141 </div>
142 </div>
143 </div>
144 </div>
145 </div>
146 </body>
147
148</html>
149
150
