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>

测试4
测试5
可见一旦低于992px就不会水平排列了
那么想要一个div多个不同设备的布局的方法就挺清晰地想到怎么去用了