Bootstrap `.hidden-xs` 不隐藏 div答案

【问题标题】：Bootstrap `.hidden-xs` does not hide divBootstrap `.hidden-xs` 不隐藏 div
【发布时间】：2015-05-30 19:45:03
【问题描述】：

我正在尝试创建一个站点，该站点将使用 Bootstrap 的 .hidden-xs 在小屏幕上为用户隐藏一个扩展部分。为了测试它，我正在使用 Chrome 的移动模拟器，将其设置为“iPhone 5”（非常小） .但是，当我刷新页面时，它不会隐藏 div。我是不是用错了类？

HTML

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <meta name="viewport" content="width=device-width, intial-scale=1">
        <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
        <link rel="stylesheet" type="text/css" href="static/css/todo.css">
        <title>TODO</title>
    </head>

    <body>
        <div class="container-fluid">
            <header>

            </header>
            <div id="left">
                <div class="test"></div>
                <div class="test"></div>
                <div class="test"></div>
                <div class="test"></div>
                <div class="test"></div>
                <div class="test"></div>
                <div class="test"></div>
            </div>
            <div class="main" class="hidden-xs">
            </div>
        </div>
    </body>
</html>

CSS

/* CSS Document */

body {
    margin: 0;
}

header {
    height: 10em;
    width: 100%;
    border-bottom: 1px solid #000000;
}

#left {
    float: left;
    height: 80%;
    max-width: 100%;
    width: 20%;
    border-right: 1px solid black;
    overflow: scroll;
}

#main {
    float: left;
    width: 80%;
    height: 100%;
}

.test {
    height: 10em;
    background-color: #eeeeee;
    width: 100%
}

.test:hover {
    background-color: #dddddd;
}

这是一个展示我的代码的 JSFiddle：https://jsfiddle.net/James_Parsons/jwqdbn61/

编辑

显然 iPhone 5 不够小。如果我同时使用.hidden-xs 和.hidden-sm，它会在所有小型设备上隐藏吗？

【问题讨论】：

iPhone 5 CSS media query的可能重复

标签： html css twitter-bootstrap responsive-design

【解决方案1】：

iPhone5 的宽度为 1136 像素，因此添加 hidden-sm 也无济于事。您需要添加一个自定义媒体查询来隐藏.main，如下所示：

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

但是有很多人使用屏幕宽度在该范围内的 PC 和笔记本电脑，因此您最终可能也会为他们隐藏 div。

如果您想隐藏宽度较大的手机/平板电脑上的 div，那么您可能必须使用老式的 user-agent 设备检测方法，该方法涉及使用 JavaScript 检查设备是否为手机/平板电脑。

另外，正如上面提到的 Kyle，您需要像这样定义您的 main 类以及您的 hidden-xx 查询类：

<div class="main hidden-xs">

【讨论】：

【解决方案2】：

这里有两个问题：

一个是 jsFiddle 不包含 viewport 标签，因此设备仿真不会尝试调整 viewport 的大小。否则，您将无法利用 Bootstrap 的响应式班级规模。确保在 head 元素中包含以下内容作为第一项：
```
<meta name="viewport" content="width=device-width, initial-scale=1">
```
Here's a plunker that includes a runnable instance
另一个问题是您在主 div 中定义了两次 class：
```
<div class="main" class="hidden-xs">
```
因此，如果您检查该元素，您实际上会注意到第二个类被忽略并且您永远不会拉入hidden-xs。而是将它们都用空格分隔，如下所示：
```
<div class="main hidden-xs">
```

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

【讨论】：

@James_Parsons，这不是很有描述性/帮助性的。你的意思是用模拟器？在真实设备上？使用我提供的链接？自己做出改变？我指出的两件事肯定阻碍了它的工作。当他们清理干净时，它对我有用。如果您使用的是 Bootstrap，则需要元视口标签，因此假装有更多像素并为已提供的类编写自定义 CSS 并不是一个非常稳定的解决方案。

【解决方案3】：

试试这个添加这个css：

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

【讨论】：