Bootstrap hidden-sm-down无法正常工作

Question

我正在使用Boostrap 3. 当我在笔记本电脑上调整页面大小时,为什么仍然可以看到<div>with 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>

Answer 1

实际上,hidden-sm-down不适用于BS4

使用BS4,显示实用程序类已完全更改.请改用此格式;

.d-{breakpoint}-{value}

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

Answer 2

正如Jaqen所说,如果你使用Bootrstrap 3,你应该使用它hidden-sm.

此外,如果要在小屏幕上隐藏图像,则必须添加hidden-xs.

这是一个JsFiddle:DEMO

Answer 3

你提到你使用Bootstrap 3

使用hidden-sm而不是hidden-sm-down属于Bootstrap 4

在旁注:

你还提到:

我想在小型设备上隐藏这两个图像,以便拥有不同的菜单.

hidden-sm将元素隐藏在iPad等小屏幕上.隐藏在额外的小屏幕上(例如电话<768px)添加hidden-xs.

在这里查看Bootstrap尺寸表

Answer 4

如果您使用的是 Bootstrap 4，则可以使用以下内容：

仅隐藏在小屏幕上

<div class="d-none d-lg-block">hidden on screens smaller than lg</div>

仅在小屏幕上可见

<div class="d-none d-sm-block d-md-none">visible on small screens</div>