bootstrap栅格布局宽度解析

1、首先，简单介绍一下boostrap，它是一个前端的CSS框架，在它的库里面集成了好多CSS样式。我们可以利用这个框架进行响应式布局。正因为它可以帮助我们进行响应式页面布局，其宽度才有了多种设定方法。

3、在boodstrap中div的宽度设定，可以使用库文件里面的col-lg-*,col-md-*和col-sm-*,col-xs-*四个class名称。

5、如果是两两组合时，当屏幕宽度变化时，css中会只有一个在起着决定性的作用。例如，我们将col-sm和col-md进行组合。

7、一般情况下，我们都会设置col-md-*或者col-sm-*作为页面桌面布局时的div的宽度，但是这两个class单纯设定的区别，在于，如果是只设定col-md-*，那么当屏幕宽度小于992的时候，直接就是col-xs-12,如果是col-sm-*则是小于768px的时候是手机版的样式。这一点我们需要格外注意，通常情况下，小于768的时候是手机版的页面。