填充满一行
如果希望一行中没有空白,行中的栅格的布局样式尾数,相加要等于12。
例如有2个栅格,一个是class="col-md-4",则另一个应当是class="col-md-8"。
有3个栅格,第一个是class="col-md-3",第二个是class="col-md-6",则第三个应当是class="col-md-3"。以此类推。
设置在不同尺寸屏幕的布局比例
同步给行内的栅格加上多个布局样式,适用不同屏幕的尺寸。
例如:
class="col-md-6 col-sm-2 col-xs-1" class="col-md-6 col-sm-10 col-xs-11"
以上设置的效果是,在中等屏幕(md)的布局比例为6:6,在小型屏幕(sm)的布局比例为2:10,在超小型屏幕(xs)的布局比例为1:11。
不同屏幕的显示效果,可以使用Chrome浏览器的开发者工具来模拟。(加链接)
设置行内偏移量
使用 col-md-offset-x 布局样式 x的范围为1-12。
要控制栅格保持在行内的12格内,所有栅格的尺寸+偏移量,不能超过12。
如果超出:
1、只有一个栅格时,不会换行,位置会偏右。
2、如果有不止一个栅格,位置会超出12的那个栅格会换行,其位置在新的行重新计算。
//例如: 第1格:col-md-3 第2格:col-md-3 col-md-offset-8 //第2格会换到下一行,最右的位置是11 (3+8)
调整行内顺序
调整顺序使用col-md-push-x (向后)和 col-md-pull-x(向前)
//向后3格 col-md-push-3 //向前9格 col-md-pull-9