在百度前端学院做任务的时候，看到有关于bootstrap的栅格系统的知识于是就在网上百度了一番，下边的网址是关于bootstrap栅格系统的详细解析，https://segmentfault.com/a/1190000000743553。
http://www.cnblogs.com/JerryTao/p/5476027.html。
http://blog.csdn.net/z742182637/article/details/50466674。
了解之后栅格系统就可以相互嵌套了。这里有我写的demo:
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="UTF-8">
5 <title>百度前端：响应式栅格布局</title>
6 <style>
7 html,body{
8 margin: 0;
9 padding: 0;
10 }
11
12 .container{
13 box-sizing: border-box;
14 border: 1px solid #999;
15 padding: 10px;
16 }
17 .row{
18 color:red;
19 margin: -10px;
20 }
21 .row:after, .row:before{
22 content: "";
23 display: table;
24 clear: both;
25 }
26
27 .col{
28 box-sizing: border-box;
29 border: 1px solid #999;
30 background-color: #EEE;
31 height: 50px;
32 margin: 10px;
33 float: left;
34
35 }
36 @media only screen and (min-width: 769px) {
37 .col-md-1{
38 width: calc(8.333% - 20px);
39 }
40
41 .col-md-2{
42 width: calc(16.666% - 20px);
43 }
44
45 .col-md-3{
46 width: calc(25% - 20px);
47 }
48
49 .col-md-4{
50 width: calc(33.333% - 20px);
51 }
52
53 .col-md-6{
54 width: calc(50% - 20px);
55 }
56 }
57
58 @media only screen and (max-width: 768px) {
59 .col-sm-2{
60 width: calc( 16.666% - 20px);
61 }
62 .col-sm-3{
63 width: calc( 25% - 20px);
64 }
65 .col-sm-6{
66 width: calc( 50% - 20px);
67 }
68 .col-sm-8{
69 width: calc( 66.666% - 20px);
70 }
71 .col-sm-12{
72 width: calc( 100% - 20px);
73 }
74 }
75 </style>
76 </head>
77 <body>
78 <div class="container">
79
80 <div class="row">
81 <div class="col-md-4 col-sm-6 col">
82 四栏 六栏
83 </div>
84
85 <div class="col-md-4 col-sm-6 col">
86 四栏 六栏
87 </div>
88
89 <div class="col-md-4 col-sm-12 col">
90 四栏 十二栏
91 </div>
92
93 </div>
94
95 <div class="row">
96 <div class="col-md-3 col-sm-3 col">
97 三栏 三栏
98 </div>
99 <div class="col-md-6 col-sm-6 col">
100 六栏 六栏
101 </div>
102 <div class="col-md-3 col-sm-3 col">
103 三栏 三栏
104 </div>
105 </div>
106
107 <div class="row">
108 <div class="col-md-1 col col-sm-2">
109 一栏 二栏
110 </div>
111 <div class="col-md-1 col col-sm-2">
112 一栏 二栏
113 </div>
114 <div class="col-md-2 col col-sm-8">
115 二栏 八栏
116 </div>
117 <div class="col-md-2 col col-sm-3">
118 二栏 三栏
119 </div>
120 <div class="col-md-6 col col-sm-3">
121 六栏 三栏
122 </div>
123
124 </div>
125 </div>
126 </body>
127 </html>
时间： 2024-11-05 13:49:16