栅栏布局

[cobish]

介绍

栅栏布局是由 Bootstrap 设计出来的，设计成一行 12 列的栅栏，有利于对每一行的列数进行分配。

优点

1. 响应式,适应不同终端
2. 布局更方便(表格要合并行列)

原理

由一层 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
    }
}

实现

类 Bootstrap 栅栏布局的实现