cobish.github.io
cobish.github.io copied to clipboard
栅栏布局
介绍
栅栏布局是由 Bootstrap 设计出来的,设计成一行 12 列的栅栏,有利于对每一行的列数进行分配。
优点
- 响应式,适应不同终端
- 布局更方便(表格要合并行列)
原理
由一层 container
包裹着,里面的一行就是一个 row
,一行规定 12 列,即 col。
其中 container
最主要是 box-sizing,保证宽度不被 border 和 padding 影响。
.container {
box-sizing: border-box;
}
接着每一个 row 都进行了清除浮动,因为 col 都是浮动的。
.row:before, .row:after {
content: "";
display: block;
visibility: hidden;
clear: both;
}
最后就是 col 的样式。col 用到了媒体查询来支持响应式。
比如在普通的 PC 下,col 分割 12 列,
一列则是 100% * (1/12),col-n 就是在基础上乘以 n。
.col-12 {
width: 100%;
}
.col-11 {
width: 91.66666667%; // 100% * 11 / 12
}
// ...
.col-6 {
width: 50%;
}
.col-1 {
width: 8.33333333%;
}
当屏幕小于 960 时,采用的是两倍列的宽度,即两列变成了一列。
n 大于 6 时,width 都设置 100%。前面一列则是 100% * (2/12),col-n 就是在基础上乘以 n,n 小于 6。
@media all and (max-width:960px) {
.col-12 {
width: 100%;
}
.col-11 {
width: 100%;
}
// ...
.col-6 {
width: 100%;
}
.col-5 {
width: 83.33333333%;
}
.col-4{
width:66.66666667%;
}
.col-1{
width:16.66666667%; // 100% * 2/12
}
}