twitter bootstrap - Deshabilitar la barra de navegación receptiva en bootstrap 4

twitter-bootstrap navbar

Question

¿hay alguna manera de deshabilitar la navBar sensible en bootstrap 4? No quiero el menú desplegable, ya que en la versión móvil todavía es posible ver los 2 enlaces al lado de la marca. Como un plus, me gustaría saber si es posible poner los enlaces a la derecha en la barra. Pull-xs-right no parece funcionar correctamente.

Mi código actual se ve así:

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

Muchas gracias de antemano.

Answer 1

La forma más simple es usar la navbar-toggleable-xl navbar-expand (ahora en Bootstrap 4 ) para que el menú no sea móvil (horizontal) en todos los anchos.

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

Demostración: Bootstrap 4 Desactiva la barra de navegación receptiva

También puede usar las utilidades de flexbox para evitar la barra de navegación vertical en pantallas más pequeñas. La flex-nowrap flex-row permite que la barra de navegación permanezca horizontal en todos los anchos ...

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

Cómo funciona:

navbar-expand : siempre horizontal, sin colapsar
navbar-expand-xl : colapsa en dispositivos móviles <1200px
navbar-expand-lg : colapsa en dispositivos móviles <992px
navbar-expand-md : colapsa en dispositivos móviles <768px
navbar-expand-sm - colapsa en el móvil <576px

no navbar-expand - siempre móvil, contraído (predeterminado)

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

Answer 2

Sugeriría usar solo un navegador, pero si necesita el estilo de la barra de navegación, puede evitarlo agregando las clases auxiliares y eliminando algunas para que funcione como desee. Esto debería mostrar los elementos de enlace en el dispositivo móvil sin la funcionalidad desplegable del botón de alternar.

<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 para referencia.