Скрытие кнопки переключения навигационной панели для устройства большого и среднего масштаба

Question

Я пытаюсь разработать адаптивный веб-сайт с использованием начальной загрузки, в которой я проектирую панель навигации, которая содержит кнопку переключения, которая должна отображаться только в том случае, если браузер сжат до устройства -sm scale.

Я попытался скрыть это, присвоив моей кнопке класс visible-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 для установки видимости элемента.