web-dev-qa-db-fra.com

Désactiver la barre de navigation réactive dans le bootstrap 4

existe-t-il un moyen de désactiver le navBar responsive dans Bootstrap 4? Je ne veux pas du menu déroulant car dans la version mobile, il est toujours possible de voir les 2 liens à côté de la marque. En plus, j'aimerais savoir s'il est possible de placer les liens vers la droite dans le bar. Pull-xs-right ne semble pas fonctionner correctement.

Mon code actuel ressemble à ceci:

<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>

Merci d'avance.

twitter-bootstrapnavbarbootstrap-4twitter-bootstrap-4
6
user2116499

Le moyen le plus simple consiste à utiliser le navbar-toggleable-xl navbar-expand class (maintenant dans Bootstrap 4 ) pour que le menu ne soit pas mobile (horizontal) dans toutes les largeurs.

<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>

Démo: Bootstrap 4 Désactiver le navigateur réactif

Vous pouvez également utiliser les utilitaires flexbox pour empêcher la barre de navigation verticale sur des écrans plus petits. Le flex-nowrap flex-row permet à la barre de navigation de rester horizontale à toutes les largeurs ...

<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>

Comment ça marche:

navbar-expand - toujours horizontal, non réductible
navbar-expand-xl - s’effondre en mobile <1200px
navbar-expand-lg - s'effondre dans un mobile <992px
navbar-expand-md - se replie sur un mobile <768px
navbar-expand-sm - se replie sur le mobile <576px

non navbar-expand - toujours mobile, réduit (par défaut)

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

20
Zim

Je suggérerais d'utiliser un simple nav, mais si vous avez besoin du style de la barre de navigation, vous pouvez la contourner en ajoutant les classes d'assistance et en en supprimant certaines pour que cela fonctionne comme vous le souhaitez. Cela devrait afficher les éléments de lien sur le mobile sans la fonctionnalité de liste déroulante du bouton bascule.

<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 pour référence.

0
Amir5000