bootstrap的12栅格系统就是把网页的总宽度平均分为12等份,方便我们自由使用组合。bootstrap还提供了更灵活的栅格系统,即栅格系统所使用的总宽度可以不固定,你可以针对一个div元素使用12等分的栅格,因为bootstrap是按照百分比进行12等分的。
栅格系统的主要工作原理:
- 行(.row)必须包含在.container中,以便为其赋予合适的对齐方式和padding。
- 使用行(.row)在水平方向创建一组 .col。
- 具体内容应放在.col中,而且只有.col可以作为.row的直接子元素。
- 内置了一堆样式,可以使用.row和.col-xs-4这样的样式来使用栅格布局。
- 通过设置padding来设置.col之间的间隔,然后通过设置第一列和最后一列的margin为负值抵消掉padding带来的影响。
- 栅格系统中的列通过制定1到12的值来表示其跨越的范围。