bootstrap栅格系统变形的解决方案

在用bootstrap的时候，我发现 如果只使用.col-sm-* 这个属性在750px范围内，div会自动变成100%,直接导致页面结构变形！这个不是我想要的！

通过仔细阅读boostrap的栅格api后得到了解决，关键API如下：

栅格参数

通过下表可以详细查看 Bootstrap 的栅格系统是如何在多种屏幕设备上工作的。

 超小屏幕 手机 (<768px)小屏幕 平板 (≥768px)中等屏幕 桌面显示器 (≥992px)大屏幕 大桌面显示器 (≥1200px)栅格系统行为总是水平排列开始是堆叠在一起的，当大于这些阈值时将变为水平排列C.container 最大宽度None （自动）750px970px1170px类前缀.col-xs-.col-sm-.col-md-.col-lg-列（column）数12最大列（column）宽自动~62px~81px~97px槽（gutter）宽30px （每列左右均有 15px）可嵌套是偏移（Offsets）是列排序是

这里必须使用.col-xs-* 这样就可以保证页面缩放的时候页面结构不会变形！