待整理(文章)

Bootstrap 应用示例

字号+ 作者:hanyufeng 来源: 2017-12-22 09:09:00 我要评论( ) 阅读:

填充满一行;设置在不同尺寸屏幕的布局比例;设置行内偏移量;调整行内顺序...

填充满一行

如果希望一行中没有空白,行中的栅格的布局样式尾数,相加要等于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


1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。