Bootstrap `.hidden-xs` 不隐藏 div

Question

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

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 它会在所有小型设备上隐藏吗？

Answer 1

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

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

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

如果你想在 Phones/Tablets 上隐藏宽度较大的 div，那么你可能不得不使用老式 user-agent设备检测方法涉及使用 JavaScript 检查设备是否为 Phone/Tablet。

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

<div class="main hidden-xs">

Answer 2

这里有两个问题：

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

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

Answer 3

试试这个添加这个 css :

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

Bootstrap `.hidden-xs` 不隐藏 div

Bootstrap `.hidden-xs` does not hide div

html

css

responsive-design

twitter-bootstrap