【Bootstrap 笔记】关于栅栏系统布局的计算方法（PC端）

admin

.container宽度为界面总宽度，css样式自行修改
row（行）必须存在.container内
col-（列）必须存在row（内）
一行内最多可以分为12列
行间距margin-top，margin-bottom，css样式自行修改
列间距padding-left，padding-right，css样式自行修改

计算公式：总宽度（.container）=（列左间距+列又间距）x（要分的列数）+（要分的列数的总宽度）
如设置
.container的总宽度为：1170
列左间距宽度：15px
列右间距宽度：15px
要分两列（8/12 和 4/12）
根据以上计算公式可以计算出两列的总宽度为：总宽度（.container）-（列左间距+列又间距）x（要分的列数）
即：1170-（15+15）x2=1110
然后除以（12列），即每列的宽度
每列的宽度为1110除以12等于92.5
然后8/12这一列的宽度为92.5x8=740
4/12这一列的宽度为92.5x4=370
最后验证一下：
总宽度（.container）=（列左间距+列又间距）x（要分的列数）+（要分的列数的总宽度）
1170=（15+15）x2+(1110)
如图：

总结一下优点与缺点：
缺点是公式不好计算
优点是省去了float clear，只要计算好公式画框框比较快！