Bootstrap hidden-sm-down 不工作

Question

我正在使用 Boostrap 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>

原文由 user1315621 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

正如 Jaqen 所说，如果你使用 Bootrstrap 3，你应该使用 hidden-sm 代替。

另外，如果你想在小屏幕上隐藏图像，你必须添加 hidden-xs 。

这是一个 JsFiddle： DEMO

原文由 Mathieu Schaeffer 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

实际上， hidden-sm-down 不适用于 Bootstrap 4 及更高版本

(there use d-none instead of hidden-sm-down , and use d-sm-none instead of hidden-sm-up , see also understanding-details ).

使用 BS4，显示实用程序类已完全改变。改用这种格式；

 .d-{breakpoint}-{value}

更多信息 ; https://getbootstrap.com/docs/4.0/utilities/display/

原文由 merkdev 发布，翻译遵循 CC BY-SA 4.0 许可协议