隐藏大中型设备的导航栏切换按钮

Question

我正在尝试使用Bootstrap开发一个响应式网站，在该网站中，我正在设计一个导航栏，其中包含一个切换按钮，该按钮仅在将浏览器挤压到-sm缩放设备时才会显示。

我试图通过给我的按钮一个类为visible-sm的方法来隐藏它，但是它没有用。 无论屏幕大小如何，切换按钮始终可见，我希望此按钮仅在小屏幕尺寸下可见。

TreeSet

我的jfiddle链接：https://jsfiddle.net/t1yodsxf/

Answer 1

要仅在sm屏幕尺寸上显示按钮，可以使用d-none d-sm-block d-md-none类。现在，该按钮仅在sm屏幕尺寸上可见，而不是在较小（xs）或较大（> = md）屏幕尺寸上显示：

<button class="navbar-toggler d-none d-sm-block d-md-none" data-toggle="collapse" data-target="#navbarMenu">
    <span class="navbar-toggler-icon"></span>
</button>

要仅在xs屏幕尺寸上显示按钮，可以使用d-block d-sm-none类：

<button class="navbar-toggler d-block d-sm-none" data-toggle="collapse" data-target="#navbarMenu">
    <span class="navbar-toggler-icon"></span>
</button>

visible-sm类在Bootstrap上不可用。只有visible and invisible类可以设置元素的可见性。