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

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

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

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

栅格参数

通过下表可以详细查看 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）	是
列排序	是

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