javascript 特定分辨率时隐藏 html 元素
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/20735302/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Hide html element when specific resolution
提问by sreginogemoh
I am using twitter bootstrap 3.0
. When resolution of the screen gets changed to smaller the menu changed to mobile view. I have a div
contained slider with images, so I want to hide that div
when my menu changed to mobile view (when screen resolution small).
我正在使用twitter bootstrap 3.0
. 当屏幕分辨率变小时,菜单更改为移动视图。我有一个div
包含图像的滑块,所以div
当我的菜单更改为移动视图时(当屏幕分辨率很小时),我想隐藏它。
I tried to apply css
classes on my div visible-desktop visible-tablet
but it is not working.
我试图css
在我的 div 上应用类,visible-desktop visible-tablet
但它不起作用。
Is there other way I can do?
我还有其他办法吗?
回答by Phil
If you're using Bootstrap v3, they changed the responsive utility class names. See http://getbootstrap.com/css/#responsive-utilities
如果您使用的是 Bootstrap v3,他们会更改响应式实用程序类名称。请参阅http://getbootstrap.com/css/#responsive-utilities
You probably want .hidden-xs
你可能想要 .hidden-xs
This was also documented in Migrating from 2.x to 3.0
这也记录在从 2.x 迁移到 3.0 中
回答by dkellner
Consider using media queries. Something like
考虑使用媒体查询。就像是
@media screen and (max-width:480px) {
.mydiv {display:none}
}
回答by Ivan
You just have to apply the Bootstrap classes as seen here. You can test them there also, if you resize your browser screen you can check wich ones are active.
你只需要所看到申请自举类在这里。您也可以在那里测试它们,如果您调整浏览器屏幕的大小,您可以检查哪些是活动的。
<div class="hidden-xs">This is the div that will hide on mobile</div>
Should only be seen in any screen bellow 768px (mobiles)
只能在 768 像素以下的任何屏幕中看到(手机)
回答by arturataide
You can put in the class of that div .hidden-xs
.. It's more simple. You are only telling that this div is visible on desktop and tablets, and not telling that it isn't visible in small devices.
你可以把那个 div 的类.hidden-xs
.. 更简单。你只是告诉这个 div 在台式机和平板电脑上可见,而不是告诉它在小型设备中不可见。