Html 引导程序“.hidden xs”不隐藏div

我正在尝试创建一个网站，使用Bootstrap的

在小屏幕上为用户隐藏一个扩展部分。hidden xs

为了测试它，我使用Chrome的移动模拟器，将其设置为“iPhone 5”（相当小）。但是，当我刷新页面时，它不会隐藏div。我使用的类是否错误

HTML

下面是一个JSFIDLE演示我的代码：

编辑

---

显然，iphone5还不够小。如果我同时使用

.hidden xs

和

.hidden sm

会在所有小型设备上隐藏吗？

iPhone5的宽度是1136px，因此添加

hidden sm

也没有帮助。您需要添加自定义媒体查询以隐藏

.main

，如下所示：

@media (max-width: 1199px) {
    .main {
        display: none;
    }
}
@media (min-width: 1200px) {
    .main {
        display: block;
    }
}

<div class="main hidden-xs">

<div class="main hidden-xs">

但是有很多人使用屏幕宽度在这个范围内的个人电脑和笔记本电脑，所以你可能最终也会为他们隐藏div

如果您想在宽手机/平板电脑上隐藏div，那么您可能必须使用老式的用户代理设备检测方法，该方法涉及使用JavaScript检查设备是否为手机/平板电脑

另外，正如Kyle上面提到的，您需要像下面这样定义

main

类以及

hidden xx

查询类：

@media (max-width: 1199px) {
    .main {
        display: none;
    }
}
@media (min-width: 1200px) {
    .main {
        display: block;
    }
}

<div class="main hidden-xs">

<div class="main hidden-xs">

---

这里有两个问题：

一个是JSFIDLE不包含viewport标记，因此设备仿真不会尝试调整视口的大小。否则，您就无法利用Bootstrap的响应类大小。确保将以下内容作为头元素中的第一项：

<meta name="viewport" content="width=device-width, initial-scale=1">

因此，如果您检查该元素，实际上会注意到第二个类被忽略，并且您从未拉入

隐藏的xs

。而是将它们添加到一个空格中，如下所示：

@media (max-width: 1199px) {
    .main {
        display: none;
    }
}
@media (min-width: 1200px) {
    .main {
        display: block;
    }
}

<div class="main hidden-xs">

<div class="main hidden-xs">

现在它应该可以正常工作了：

---

尝试添加此css：

@media (max-width:767px){.hidden-xs{display:none!important}}

---

可能是@James_Parsons的重复，这不是很好的描述/帮助。你是说使用模拟器？在真正的设备上？使用我提供的链接？自己做改变？我指出的两件事肯定阻碍了这项工作。当他们清理干净后，这对我起了作用。如果您使用的是Bootstrap，您需要meta-viewport标记，因此假装有更多像素并为已经提供的类编写自定义CSS并不是一个非常稳定的解决方案。