bootstrap多个样式,怎么理解?
本文介绍了bootstrap多个样式,怎么理解?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
问 题
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这两个样式应该是不存在的
,然后看调试工具,并不是.
请教真相是什么样的,目的就是要大屏幕显示背景图片,小屏幕则不
解决方案
你的这种写法实际是重写了在#paypaypay
下的col-xs-12 col-sm-12
的样式。
所以你这里的col-xs-12 col-sm-12
就是单纯的定义了两个class
而已。和原来bootstrap
本身已经没有关系了。
如果你是为了根据分辨率隐藏你应该使用.visible-xs-*
这个辅助类
看这个链接
这篇关于bootstrap多个样式,怎么理解?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文