bootstrap栅格系统错位问题

在项目中div可以设置属性class=“col-size-x” //size取值为xs，sm，md，lg；x取值为1-12 可以让此div占据本行的 x/12

.col-xs- 超小屏幕 手机 (<768px)
.col-sm- 小屏幕 平板 (≥768px)
.col-md- 中等屏幕 桌面显示器 (≥992px)
.col-lg- 大屏幕 大桌面显示器 (≥1200px)

因为一直在用大屏幕开发所以一直只写了一个col-lg-x属性，到页面嵌套的时候，明明定义在一个row的元素分成了多行显示

解决方案：

在一定确定某元素的占row的宽度比例的时候，把所有的屏幕适应大小的class属性都写上去

<div class="row">
<div class="clo-lg-4 col-md-4 col-sm-4 col-xs-4">
div1
</div>
<div class="clo-lg-4 col-md-4 col-sm-4 col-xs-4">
div2
</div>
<div class="clo-lg-4 col-md-4 col-sm-4 col-xs-4">
div3
</div>
</div>

对栅格系统描述比较详细的文章链接 http://www.jb51.net/article/75386.htm