特定分辨率时隐藏html元素

时间:2013-12-22 23:44:05

标签: javascript html css twitter-bootstrap-3

我正在使用twitter bootstrap 3.0。当屏幕分辨率变小时,菜单变为移动视图。我有一个包含图片的div滑块,所以当我的菜单更改为移动视图时(屏幕分辨率很小),我想隐藏div

我尝试在我的div css上应用visible-desktop visible-tablet课程,但它无效。

我还能采取其他方式吗?

4 个答案:

答案 0 :(得分:11)

如果您使用的是Bootstrap v3,则会更改响应式实用程序类名称。见http://getbootstrap.com/css/#responsive-utilities

您可能需要.hidden-xs

Migrating from 2.x to 3.0

中也记录了这一点

答案 1 :(得分:7)

考虑使用媒体查询。像

这样的东西
@media screen and (max-width:480px) {
    .mydiv {display:none}
}

答案 2 :(得分:4)

您只需要按照here应用Bootstrap类。您也可以在那里测试它们,如果您调整浏览器屏幕的大小,您可以检查哪些是活动的。

<div class="hidden-xs">This is the div that will hide on mobile</div>

只能在768px(手机)以下的任何屏幕中看到

答案 3 :(得分:0)

你可以放入那个div .hidden-xs的类。它更简单。您只是说这个div在桌面和平板电脑上是可见的,而不是告诉它在小型设备中不可见。