**
Bootstrap栅格布局的理解
**
刚开始了解bootstrap的栅格布局有点乱，并且也理解错了。
正如col-xs-2 col-md-4什么的没有正确的认识。
今天重新学习了下发现其实太tm简单的原理，好多地方的教程应该是说得太复杂了
插入官方的解释：
栅格参数
通过下表可以详细查看 Bootstrap 的栅格系统是如何在多种屏幕设备上工作的。
| 超小屏幕 手机 (<768px) | 小屏幕 平板 (≥768px) | 中等屏幕 桌面显示器 (≥992px) | 大屏幕 大桌面显示器 (≥1200px) | |
|---|---|---|---|---|
| 栅格系统行为 | 总是水平排列 | 开始是堆叠在一起的，当大于这些阈值时将变为水平排列C | ||
.container 最大宽度 |
None （自动） | 750px | 970px | 1170px |
| 类前缀 | .col-xs- |
.col-sm- |
.col-md- |
.col-lg- |
| 列（column）数 | 12 | |||
| 最大列（column）宽 | 自动 | ~62px | ~81px | ~97px |
| 槽（gutter）宽 | 30px （每列左右均有 15px） | |||
| 可嵌套 | 是 | |||
| 偏移（Offsets） | 是 | |||
| 列排序 | 是 | |||
这里最重要还是这句话：栅格系统行为 总是水平排列 开始是堆叠在一起的，当大于这些阈值时将变为水平排列C
用以下实例记录：
<div class="container">
<div class="row">
<div class="col-xs-4">
col-xs-4
</div>
<div class="col-xs-3">
col-xs-3
</div>
<div class="col-xs-3">
col-xs-3
</div>
<div class="col-xs-2">
col-xs-2
</div>
</div>
</div>但实际上是不需要去考虑啥时候用xs 啥时候用md，啥时候用lg
因为这些参数只是个阈值罢了。
回到这句话：总是水平排列，开始是堆叠在一起的，当大于这些阈值时将变为水平排列也就是比如像上面那样你只设置了xs这个参数，并且只有4个。因为我们知道xs这种类的范围是 小于768像素。但事实它不意味着仅仅小于768的设备才生效！ 因为以上代码的显示效果是 无论像素多大多小它都是以水平的形式表现。!
因为栅格系统 是低于设定的阈值才会失去水平的显示效果
如图 都是以水平排列
可以用另外的代码看看效果:
<div class="container">
<div class="row">
<div class="col-md-4">
col-md-4
</div>
<div class="col-md-3">
col-md-3
</div>
<div class="col-md-3">
col-md-3
</div>
<div class="col-md-2">
col-md-2
</div>
</div>
</div>
可见一旦低于992px就不会水平排列了
那么想要一个div多个不同设备的布局的方法就挺清晰地想到怎么去用了
