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

Question

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

我试图通过给我的按钮一个可见的SM类来隐藏它，但它不起作用。无论屏幕尺寸如何，切换按钮始终可见，我希望此按钮仅在小屏幕尺寸下可见。

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

我的 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和invisible类来设置元素的可见性。