Bootstrap` .hidden-xs`不会隐藏div

Question

Bootstrap` .hidden-xs`不会隐藏div

an *_*wig 5 responsive-design twitter-bootstrap

我正在尝试创建一个网站,它将使用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>

Run Code Online (Sandbox Code Playgroud)

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;
}

Run Code Online (Sandbox Code Playgroud)

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

编辑

显然iPhone 5还不够小.如果我同时使用.hidden-xs,并.hidden-sm会将其在所有小型设备隐藏？

Answer 1

And*_*L64 6

iPhone5的宽度是1136px,因此添加hidden-sm也无济于事.您需要添加自定义媒体查询以隐藏.main如下:

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

Run Code Online (Sandbox Code Playgroud)

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

如果你想隐藏宽度较大的手机/平板电脑上的div,那么你可能不得不采用旧学校用户代理设备检测方法,该方法涉及使用JavaScript来检查设备是否是手机/平板电脑.

另外,正如Kyle所提到的,你需要像这样一起定义你的main类和你的hidden-xx查询类:

<div class="main hidden-xs">

Run Code Online (Sandbox Code Playgroud)

Answer 2

Kyl*_*Mit 6

这里有两个问题:

一个是jsFiddle不包含视口标记,因此设备模拟不会尝试调整视口大小.没有它,你就无法利用Bootstrap的响应类大小.确保将以下内容包含在head元素中的第一项:
```
<meta name="viewport" content="width=device-width, initial-scale=1">
```
Run Code Online (Sandbox Code Playgroud)
这是一个包含可运行实例的plunker
另一个问题是你class在主div中定义了两次:
```
<div class="main" class="hidden-xs">
```
Run Code Online (Sandbox Code Playgroud)
因此,如果您检查元素,您实际上会注意到第二个类被忽略而您从未拉入hidden-xs.而是将它们分开,用这样的空格分隔:
```
<div class="main hidden-xs">
```
Run Code Online (Sandbox Code Playgroud)

现在它应该工作正常:

@James_Parsons,这不是很有描述性/乐于助人.你的意思是使用模拟器？在真实设备上？使用我提供的链接？自己做出改变？我指出的两件事肯定会妨碍工作.当他们清理时,它对我有用.如果您正在使用Bootstrap,则需要元视口标记,因此假装有更多像素,并且为已经提供的类编写自定义CSS不是一个非常稳定的解决方案. (2认同)

归档时间：	10 年，9 月前
查看次数：	35009 次
最近记录：	9 年，6 月前