Вопрос по bootstrap-4, twitter-bootstrap, twitter-bootstrap-4, navbar – правильно, но было бы гораздо проще скопировать некоторые из CSS в пользовательский класс, чем удалить функциональность вокруг панели навигации IMO. Я могу добавить CSS к ответу.

7

ли способ отключить отзывчивый navBar в начальной загрузке 4? Я не хочу выпадающий список, так как в мобильной версии все еще можно увидеть 2 ссылки рядом с брендом. В качестве плюса, я хотел бы знать, возможно ли разместить ссылки справа на панели. Pull-xs-right не работает правильно.

Мой текущий код выглядит так:

<nav class="navbar navbar-fixed-top navbar-toggleable-sm navbar-light bg-faded">
    <a href="/" class="navbar-brand">PIM</a>
    <ul class="nav navbar-nav pull-xs-right">
        <li class="nav-item"><Link class="nav-link" to="/login">Login</Link></li>
        <li class="nav-item"><Link class="nav-link" to="/signup">Sign up</Link></li>
    </ul>
</nav>

Большое спасибо заранее.

Ваш Ответ

2   ответа
21

Самый простой способ - использоватьnavbar-toggleable-xl navbar-expand класс (сейчас вBootstrap 4), чтобы меню было неподвижным (горизонтальным) при любой ширине.

<nav class="navbar navbar-expand navbar-dark bg-primary">
    <a class="navbar-brand" href="#">Navbar</a>
    <div class="navbar-collapse collapse">
        <ul class="navbar-nav">
            <li class="nav-item">
                <a class="nav-link" href="#">Link</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link</a>
            </li>
        </ul>
    </div>
</nav>

Демо-версия:Bootstrap 4 Отключить отзывчивый Навбар

Вы также можете использоватьflexbox утилиты для предотвращения вертикальной навигационной панели на экранах меньшего размера.flex-nowrap flex-row позволяют навигационной панели оставаться горизонтальной при любой ширине ...

<nav class="navbar navbar-light bg-faded justify-content-between flex-nowrap flex-row">
    <a href="/" class="navbar-brand">PIM</a>
    <ul class="nav navbar-nav flex-row">
        <li class="nav-item"><a class="nav-link pr-3" href="/login">Login</a></li>
        <li class="nav-item"><a class="nav-link" href="/signup">Sign up</a></li>
    </ul>
</nav>

Как это устроено:

navbar-expand - всегда горизонтальный, не разрушающийся
navbar-expand-xl - рушится на мобильный <1200px
navbar-expand-lg - рушится на мобильный <992px
navbar-expand-md - рушится на мобильный <768px
navbar-expand-sm - рушится на мобильный <576px

нетnavbar-expand - всегда мобильный, свернутый (по умолчанию)

http://www.codeply.com/go/z9VJTOBuaS

Чувак! Спасибо вам большое! Я имею в виду, действительно. Я потратил на это 3 часа и не смог найти простой способ сделать это. user2116499
Хорошо, я действительно должен был знать оnavbar-expand но это была проблема, которая у меня была, так как у меня была моя вnavbar-expand-md и это дуло(в высоту) весь див. Abela
Любой способ оправдать, а такжезаполнить полная ширина навигационной панели? В основном такой же эффект, как вы бы использовали<ul class="nav nav-justified"> или же<ul class="nav nav-fill">? QuantumHive
0

но если вам нужно оформить навигационную панель, вы можете обойти ее, добавив вспомогательные классы и удалив некоторые, чтобы заставить его функционировать так, как вы хотите. При этом должны отображаться элементы ссылок на мобильном устройстве без функции выпадающего списка переключателей.

<nav class="navbar navbar-fixed-top navbar-toggleable-sm navbar-light bg-faded"> <a href="/" class="navbar-brand">PIM</a> <div id="navbarNav" class="navbar-collapse"> <ul class="navbar-nav"> <li class="nav-item"> <Link class="nav-link" to="/login"> Login </Link> </li> <li class="nav-item"> <Link class="nav-link" to="/signup"> Sign up </Link> </li> </ul> </div> </nav>

JSFIDDLE для справки.

Спасибо Амир, просто у меня нет навыков работы с CSS, и использование navBar облегчает эту задачу. Я думаю, что если я удалю navBar, он также удалит CSS. D, ты знаешь, как я могу получить CSS для этого тогда? user2116499
правильно, но было бы гораздо проще скопировать некоторые из CSS в пользовательский класс, чем удалить функциональность вокруг панели навигации IMO. Я могу добавить CSS к ответу. Amir5000

Похожие вопросы