工作之中经常会用到bootstrap栅格布局，昨天还有同事问到我关于栅格布局列数问题的设定。今天就将自己对bootstrap栅格布局的一些浅显的见解分享给大家。
方法/步骤
1、首先，简单介绍一下boostrap，它是一个前端的CSS框架，在它的库里面集成了好多CSS样式。我们可以利用这个框架进行响应式布局。正因为它可以帮助我们进行响应式页面布局，其宽度才有了多种设定方法。
2、bootstrap是栅格布局的，不论屏幕宽度是多少，bootstrap都是将屏幕水平方向上分为12列，只是每列的宽度不同，
3、在boodstrap中div的宽度设定，可以使用库文件里面的col-lg-*,col-md-*和col-sm-*,col-xs-*四个class名称。
4、这四个名称分别对应了屏幕的四种宽度范围，我们需要在合适的屏幕，应用合适的class。这四个可以两两组合，也可以多个或者全部组合。
5、如果是两两组合时，当屏幕宽度变化时，css中会只有一个在起着决定性的作用。例如，我们将col-sm和col-md进行组合。
6、当这两个class进行组合的时候，在大于厮舳孺霏等于992像素的时候，是采用的col-md-*来设定div所占据的列数，当小于等于992并且大于等于768的骀旬沃啭时候，采用col-sm-*来决定div所占据的列数，小于768px的时候，默认div的宽度为其父级元素宽度的100%
7、一琐绔纠滴般情况下，我们都会设置col-md-*或者col-sm-*作为页面桌面布局时的div的宽度，但是这两个class单纯设定鹚兢尖睁的区别，在于，如果是只设定col-md-*，那么当屏幕宽度小于992的时候，直接就是col-xs-12,如果是col-sm-*则是小于768px的时候是手机版的样式。这一点我们需要格外注意，通常情况下，小于768的时候是手机版的页面。