我尝试使用Bootstrap visible
和hidden
类来创建仅在移动/桌面上可见的内容.我注意到这些类没有正常工作(我注意到很多人都遇到了这个问题并以这种方式解决了)所以我创建了一个移动样式表来设置要在移动设备上显示哪些div.
这是我目前的代码:
test
现在.mobile
应该可以在移动屏幕上看到,900px宽度和更小.我使用Bootstrap类作为另一个div,.containerdiv
并且到目前为止工作,但只有当我hidden-xs
在我自己的移动CSS表中添加一个值时,就像这样;
.hidden-xs { display:none !important; } .mobile { display:block !important; }
该.mobile
DIV应该会显示在屏幕上900px或更小,但它仍然没有.我不确定为什么它没有,display:block
是正确的用法吗?添加visible-xs
并且visible-sm
什么都不做.
这样做的正确方法是什么,为什么我的版本不起作用?
不需要CSS,可见类应该是这样的:visible-md-block
不仅仅是visible-md
代码应该像这样:
<div class="containerdiv hidden-sm hidden-xs visible-md-block visible-lg-block"> <div class="row"> <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 logo"> </div> </div> </div> <div class="mobile hidden-md hidden-lg "> test </div>
根本不需要额外的css.
你的.mobile
div有以下样式:
.mobile { display: none !important; visibility: hidden !important; }
因此,除了覆盖visibility
属性外,visible
还需要覆盖该display
属性block
.像这样:
.visible-sm { display: block !important; visibility: visible !important; }