twitter-bootstrap 隐藏小屏幕和超小屏幕设备的内容
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/23946301/
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
Hide content from small and extra small screen size devises
提问by TNK
I need to hide some HTMLcontents from the screen when the devices are changing. That mean I am trying to create a responsive design. In small screen sizes (below 768px) I want to hide some contents.
HTML当设备发生变化时，我需要从屏幕上隐藏一些内容。这意味着我正在尝试创建响应式设计。在小屏幕尺寸（低于 768 像素）中，我想隐藏一些内容。
My contents something like this -
我的内容是这样的 -
<div class="content-to-hide">
<div class="container">
<a class="banner-brand visible-sm visible-md visible-lg" href="index.html">
<img src="" alt="" width="280">
</a>
<div class="utility-nav">
<ul>
<li><a href="#" id="example" data-toggle="tooltip" data-placement="left" title=""><i class="icon fa fa-users fa-lg"></i><br /><span>xxxxxxxxxxxxxx</span></a></li>
<li><a href="#" title="View Cart"><i class="icon fa fa-unlock-alt fa-lg"></i><br /><span>Sign in</span></a></li>
</ul>
<h2><i class="icon fa fa-phone-square"></i> <span>Hot Line</span>xxx-xxx-xx-xx</h2>
</div><!-- /.utility-nav -->
</div><!-- /.container -->
<div class="hr"><hr /></div>
</div>
So I want to hide this contents from small and extra small size screen devises.
所以我想从小型和超小型屏幕设备中隐藏这些内容。
I tried it using LESSCSSbut no luck
我尝试使用LESSCSS但没有运气
@media (max-width: (@grid-float-breakpoint - 1)) {
.content-to-hide {
display: none;
}
}
Hope someone will help my out.
希望有人能帮助我。
Thank You.
谢谢。
回答by Kyojimaru
why not use
为什么不使用
@media (max-width: 767px) {
.content-to-hide {
display: none;
}
}
if you want to hide the content for screen-size below 768px
如果您想隐藏屏幕尺寸低于 768 像素的内容
回答by lindsay
I'd go with Kyojimaru's response. Another option could be to use layout selectors. For example.
我同意京岛丸的回答。另一种选择是使用布局选择器。例如。
@media (orientation:portrait) {
.my-element {
display: none; /* visibility: none; */
}
}
@media (orientation:landscape) and (max-width: 767px) {
.my-element {
display: none; /* visibility: none; */
}
}
