twitter-bootstrap Bootstrap `.hidden-xs` 不隐藏 div
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/29284450/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap `.hidden-xs` does not hide div
提问by an earwig
I am trying to create a site, that will hide an extended section for users on a small screen using Bootstrap's .hidden-xsTo test it, I am using Chrome's mobile emulator, setting it to "iPhone 5" (pretty small). When I refresh the page, however, it does not hide the div. Am I using the class wrong?
我正在尝试创建一个站点，该站点将使用 Bootstrap 在小屏幕上为用户隐藏扩展部分。.hidden-xs为了测试它，我使用 Chrome 的移动模拟器，将其设置为“iPhone 5”（非常小）。但是，当我刷新页面时，它不会隐藏 div。我使用的课程有误吗？
HTML
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
/* 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;
}
here is a JSFiddle demonstrating my code: https://jsfiddle.net/James_Parsons/jwqdbn61/
这是一个演示我的代码的 JSFiddle：https://jsfiddle.net/James_Parsons/jwqdbn61/
EDIT
编辑
Apparently an iPhone 5 is not small enough. If I use both .hidden-xsand .hidden-smwill it be hidden on all small devices?
显然，iPhone 5 还不够小。如果我同时使用两者.hidden-xs，.hidden-sm它会隐藏在所有小型设备上吗？
回答by AndrewL64
The iPhone5 width is 1136px so adding hidden-smtoo won't help. You will need to add a custom media query to hide the .mainlike this:
iPhone5 的宽度为 1136 像素，因此添加hidden-sm也无济于事。您将需要添加一个自定义媒体查询来隐藏.main这样的：
@media (max-width: 1199px) {
.main {
display: none;
}
}
@media (min-width: 1200px) {
.main {
display: block;
}
}
BUTthere are a lot of people using PCs and Laptops with a screen width in that range so you might end up hiding the div for them too.
但是有很多人使用屏幕宽度在该范围内的 PC 和笔记本电脑，因此您最终可能也会为他们隐藏 div。
If you want to hide the div on Phones/Tablets having a large width, then you might have to go with the old school user-agentdevice detection approach which involves using JavaScript to check if the device is a Phone/Tablet or not.
如果您想在宽度较大的手机/平板电脑上隐藏 div，那么您可能必须使用老式的用户代理设备检测方法，该方法涉及使用 JavaScript 来检查设备是否为手机/平板电脑。
Also, as Kyle mentioned above, you need to define your mainclass as well as your hidden-xxquery class together like this:
此外，正如上面提到的凯尔，您需要像这样一起定义您的main类和hidden-xx查询类：
<div class="main hidden-xs">
回答by KyleMit
There are two issues here:
这里有两个问题：
One is that the jsFiddle does not include the viewport tag so the device emulation does not try to resize the viewport. Without that, you cannot take advantage of Bootstrap's responsive class sizes. Make sure to include the following as the first item in your head element:
<meta name="viewport" content="width=device-width, initial-scale=1">The other issue is that you have
classdefined twice in you main div:<div class="main" class="hidden-xs">So if you inspect the element, you'll actually notice that the second class is ignored and you never pull in
hidden-xs. Instead add them both separated by a space like this:<div class="main hidden-xs">
一个是 jsFiddle 不包含视口标签，因此设备模拟不会尝试调整视口的大小。没有它，您就无法利用 Bootstrap 的响应式类大小。确保将以下内容作为 head 元素中的第一项：
<meta name="viewport" content="width=device-width, initial-scale=1">另一个问题是您
class在主 div 中定义了两次：<div class="main" class="hidden-xs">因此，如果您检查元素，您实际上会注意到第二个类被忽略并且您永远不会引入
hidden-xs. 而是添加它们，以这样的空格分隔：<div class="main hidden-xs">
Now it should work fine:
现在它应该可以正常工作：
回答by Bruno Ribeiro
try this add this css :
试试这个添加这个css：
@media (max-width:767px){.hidden-xs{display:none!important}}
