Bootstrap`.hidden

Bootstrap`.hidden-xs`不会隐藏div(Bootstrap `.hidden-xs` does not hide div)

我正在尝试创建一个网站，它将使用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它会隐藏在所有小设备上？

I am trying to create a site, that will hide an extended section for users on a small screen using Bootstrap's .hidden-xs To 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?

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

here is a JSFiddle demonstrating my code: https://jsfiddle.net/James_Parsons/jwqdbn61/

EDIT

Apparently an iPhone 5 is not small enough. If I use both .hidden-xs and .hidden-sm will it be hidden on all small devices?

最满意答案

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

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

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

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

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

The iPhone5 width is 1136px so adding hidden-sm too won't help. You will need to add a custom media query to hide the .main like this:

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

BUT there 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.

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-agent device detection approach which involves using JavaScript to check if the device is a Phone/Tablet or not.

Also, as Kyle mentioned above, you need to define your main class as well as your hidden-xx query class together like this:

更多推荐