bootstrap多个样式,怎么理解?

Question

HTML部分

<div class="col-md-10 col-xs-12 col-sm-12 col-md-offset-1 ">
            <div id="light">
            balabala
            </div>
 </div>

CSS 部分

#paypaypay .col-md-10 #light{  background:#fff url(../images/1.jpg) no-repeat left top;}
#paypaypay .col-xs-12 #light,#paypaypay .col-sm-12 #light{background:#fff none;}

我的理解在大屏幕上 col-xs-12 col-sm-12这两个样式应该是不存在的 ,然后看调试工具,并不是.

请教真相是什么样的,目的就是要大屏幕显示背景图片,小屏幕则不

Answer 1

你的这种写法实际是重写了在#paypaypay下的col-xs-12 col-sm-12的样式。

所以你这里的col-xs-12 col-sm-12 就是单纯的定义了两个class而已。和原来bootstrap本身已经没有关系了。

如果你是为了根据分辨率隐藏你应该使用.visible-xs-* 这个辅助类

看这个链接

responsive-utilities-classes

Answer 2

col-md 和 col-xs的设置影响于div栅格的布局
你可以用@media完成你的需求