Bootstrap栅格布局的注意事项

来源:互联网 发布:傲剑坐骑数据 编辑:程序博客网 时间:2024/05/01 06:53

    首先,栅格布局是将页面分为12列的,在不同的视口宽度之下,栅格布局的每一列的宽度应该是不一样的。从320一直到最大,分别是:col-xs-*,col-sm-*,col-md-*,还有col-lg-*,其中当我们的视口宽度>=768px的时候,我们的视口的宽度是使用col-sm,所以一般情况下我们只需使用col-sm即可,无需再使用col-md-*。

    还有,当我们遇到在768px以上是左侧文字右侧图片或者右侧文字左侧图片,而768px以下是文字在上图片在下的设计图,我们就可以考虑用栅格布局的左右浮动属性,栅格布局的浮动属性是会随着视口的大小发生变化的,所以我们可以使用col-sm-pull-*左侧是使用push,右侧的使用pull,这样当视口宽度小于768的时候我们的栅格布局浮动就会结束了。

  再有就是我们使用栅格布局的时候不要改变container的宽度,container的宽度是会随着视口的宽度大小进行适配的。我们的栅格布局外层分别要添加container>row两个标签,

0 0