Bootstrap 4: всегда отображать кнопку мобильного меню независимо от размера экрана.

Как я могу всегда отображать кнопку мобильного меню независимо от размера экрана? Я не хочу, чтобы ссылки появлялись, пока человек не нажмет кнопку мобильного телефона. Благодарю вас!

Я понимаю, что здесь есть сообщение о Bootstrap 3, однако оно не работает с Bootstrap 4. Не могли бы вы посоветовать?


css twitter-bootstrap bootstrap-4 navbar
person Bill Johnson    schedule 08.02.2017    source источник
comment
Ответ, помеченный как дубликат, предназначен для Bootstrap 3, а самый последний ответ - более года назад. Если вы используете Bootstrap 4, удалите класс navbar-toggleable-* из класса ‹nav›. Тогда он всегда будет свернут, а не только на определенный размер.   -  person The4thIceman    schedule 08.02.2017
comment
Спасибо. Это полезный ответ, надеюсь, флаг будет снят, и я смогу проголосовать.   -  person Bill Johnson    schedule 08.02.2017

Ответы (1)


arrow_upward
14
arrow_downward

Обновите Bootstrap 4.1.x

Исключить класс navbar-expand*.

В бета-версии класс navbar-toggleable-* был заменен на navbar-expand-*, но теперь все перемещается на более высокий уровень. Поскольку состояние панели навигации по умолчанию всегда свернуто/мобильно (xs), вы просто исключите класс navbar-expand-*, чтобы меню всегда было свернуто на всех уровнях.

Бета-демонстрация: https://www.codeply.com/go/HiMQd9taEd
Bootstrap 4.1.3: https://www.codeply.com/go/ugmj6XKY79

Исходный ответ (Bootstrap 4 альфа)

В Bootstrap 4 навигационная панель сильно отличается от 3.x, и она всегда свернута, если только она не переопределена одним из классов navbar-toggleable-*. Вам просто нужно убедиться, что ваша панель навигации не включает navbar-toggleable-*.

<nav class="navbar navbar-fixed-top">
    <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#collapsingNavbar">
        <span class="navbar-toggler-icon"></span>
    </button>
    <a class="navbar-brand" href="#">Navbar</a>
    <div class="navbar-collapse collapse" id="collapsingNavbar">
        <ul class="navbar-nav">
            <li class="nav-item active">
                <a class="nav-link" href="#">Home</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Features</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Wow</a>
            </li>
        </ul>
    </div>
</nav>

Альфа-демонстрация: http://www.codeply.com/go/LN6szcJO53

person Zim    schedule 08.02.2017
comment
Обратите внимание, что если вы копируете примеры из Bootstrap, вам также необходимо удалить d-sm-inline-flex в div navbar-collapse. - person Red; 04.05.2020