Html Bootstrap hidden-sm-down 不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/37764794/
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-sm-down not working
提问by user1315621
I am using Boostrap 3. Why the <div>with hidden-sm-downis still visible when I resize the page on my laptop? I want to hide those two images on small devices in order to have a different menu.
我使用的自举3.为什么<div>用hidden-sm-down仍是可见的，当我调整我的笔记本电脑的页面？我想在小型设备上隐藏这两个图像以获得不同的菜单。
<div class="row">
<div class="col-md-7 left">
<ul class="row">
<li class="col-md-2">
<a href="">Text</a>
</li>
<li class="col-md-2">
<a href="">Text</a>
</li>
<li class="col-md-3">
<a href="">Text</a>
</li>
<li class="col-md-3">
<a href="">Text</a>
</li>
<li class="col-md-2">
<a href="">Text</a>
</li>
</ul>
</div>
<div class="col-md-1 hidden-sm-down wave">
<img src="img/ondina.png" />
</div>
<div class="col-md-3 right">
<ul class="row">
<li class="col-md-6">
<a href="">Text</a>
</li>
<li class="col-md-6">
<a href="">Text</a>
</li>
</ul>
</div>
<div class="col-md-1 hidden-sm-down right-border">
<img src="img/menu-right.png" />
</div>
</div>
回答by merkdev
Actually, hidden-sm-downwon't work with BS4
实际上，hidden-sm-down不适用于 BS4
With BS4, display utility classes are completely changed. Use this format instead;
使用 BS4，显示实用程序类完全改变。改用这种格式；
.d-{breakpoint}-{value}
More information ; https://getbootstrap.com/docs/4.0/utilities/display/
回答by Mathieu Schaeffer
回答by Jaqen H'ghar
You mention you use Bootstrap 3
你提到你使用 Bootstrap 3
Use hidden-sminstead of hidden-sm-downwhich belongs to Bootstrap 4
使用hidden-sm而不是hidden-sm-down属于Bootstrap 4
On a side note:
旁注：
You also mention:
你还提到：
I want to hide those two images on small devices in order to have a different menu.
我想在小型设备上隐藏这两个图像以获得不同的菜单。
hidden-smwill hide the element on small screens such as iPad. To hide on extra small screens (such as Phones < 768px) add hidden-xs.
hidden-sm将在 iPad 等小屏幕上隐藏元素。要隐藏在超小屏幕（例如电话 < 768px）上，请添加hidden-xs.
Take a look at the Bootstrap sizes table here
在此处查看 Bootstrap 大小表
回答by Yuvraj Patil
If you are using Bootstrap 4, you can utilize following:
如果您使用的是 Bootstrap 4，则可以使用以下内容：
Hidden only on small screens
仅隐藏在小屏幕上
<div class="d-none d-lg-block">hidden on screens smaller than lg</div>
Visible only on small screens
仅在小屏幕上可见
<div class="d-none d-sm-block">visible on small screens</div>
