He creado una barra de navegación con Bootstrap 4 alpha 6, que tiene una gran marca/icono de la izquierda, y 2 barra de navegación-navegación con enlaces a la derecha del icono. Uno nav enlaces, y el otro nav ha iconos. Funciona exactamente como yo quiero, excepto por una cosa.

Me gustaría que las 2 barras de exploración a aparecer en 2 filas separadas a la derecha del icono. Como este:

------------------------------------------------------
               link link link link  
brand-icon -------------------------------------------
               icon icon icon
------------------------------------------------------

La versión móvil mostrará los enlaces de forma vertical, como lo hace ahora. He intentado varias cosas diferentes con flexbox, pero no puede conseguir que funcione.

Aquí está mi código:

<nav class="navbar navbar-toggleable-md navbar-inverse bg-inverse">
    <div class="container">
        <button class="navbar-toggler navbar-toggler-right align-self-center mt-3" type="button" data-toggle="collapse" data-target="#navbarCollapse">
            <span class="navbar-toggler-icon"></span>
        </button>
        <h1 class="py-2 ml-lg-2 mx-3"><a href="#"><i class="fa fa-envelope-open-o fa-lg" aria-hidden="true"></i></a></h1>
        <div class="collapse navbar-collapse ml-lg-0 ml-3" id="navbarCollapse">
            <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="#">Product</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Shop</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">About</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Events</a>
                </li>
            </ul>
            <ul class="navbar-nav">
                <li class="nav-item">
                    <a class="nav-link pr-3" href="#"><i class="fa fa-facebook"></i></a>
                </li>
                <li class="nav-item">
                    <a class="nav-link pr-3" href="#"><i class="fa fa-instagram"></i></a>
                </li>
                <li class="nav-item">
                    <a class="nav-link pr-3" href="#"><i class="fa fa-twitter"></i></a>
                </li>
            </ul>
        </div>
    </div>
</nav>

OriginalEl autor Tom Michew | 2017-03-06

2 Comentarios

  1. 19

    Puede utilizar el flex-column flexbox clase de utilidad a la pila de la 2 navs en posición vertical junto al icono. Esto establece flex-direction: column en el navbar-collapse div para que el niño los elementos de la pila vertical.

    Bootstrap 4 navbar con 2 filas

    <nav class="navbar navbar-toggleable-md navbar-inverse bg-inverse">
    <div class="container">
    <button class="navbar-toggler navbar-toggler-right align-self-center mt-3" type="button" data-toggle="collapse" data-target="#navbarCollapse">
    <span class="navbar-toggler-icon"></span>
    </button>
    <h1 class="py-2 ml-lg-2 mx-3"><a href="#"><i class="fa fa-envelope-o fa-lg mt-2" aria-hidden="true"></i></a></h1>
    <div class="collapse navbar-collapse flex-column ml-lg-0 ml-3" id="navbarCollapse">
    <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="#">Product</a>
    </li>
    <li class="nav-item">
    <a class="nav-link" href="#">Shop</a>
    </li>
    <li class="nav-item">
    <a class="nav-link" href="#">About</a>
    </li>
    <li class="nav-item">
    <a class="nav-link" href="#">Events</a>
    </li>
    </ul>
    <ul class="navbar-nav flex-row mb-2">
    <li class="nav-item">
    <a class="nav-link py-1 pr-3" href="#"><i class="fa fa-facebook"></i></a>
    </li>
    <li class="nav-item">
    <a class="nav-link py-1 pr-3" href="#"><i class="fa fa-instagram"></i></a>
    </li>
    <li class="nav-item">
    <a class="nav-link py-1 pr-3" href="#"><i class="fa fa-twitter"></i></a>
    </li>
    </ul>
    </div>
    </div>
    </nav>

    Demo – Bootstrap 4 navbar con 2 filas


    Aquí otra variación con el 2 filas y derecho alinear formulario de búsqueda:
    Bootstrap 4 navbar con 2 filas

    <nav class="navbar navbar-toggleable-md navbar-light bg-faded">
    <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarCollapse">
    <span class="navbar-toggler-icon"></span>
    </button>
    <a class="navbar-brand my-auto" href="#">Brand</a>
    <div class="collapse navbar-collapse flex-md-column" id="navbarCollapse">
    <ul class="navbar-nav ml-auto small">
    <li class="nav-item active">
    <a class="nav-link" href="#">Shop</a>
    </li>
    <li class="nav-item">
    <a class="nav-link" href="#">Products</a>
    </li>
    <li class="nav-item">
    <a class="nav-link" href="#">Team</a>
    </li>
    <li class="nav-item">
    <a class="nav-link" href="#">About</a>
    </li>
    <li class="nav-item">
    <a class="nav-link" href="#">Events</a>
    </li>
    </ul>
    <form class="form-inline ml-auto">
    ...
    </form>
    </div>
    </nav>

    Demo – Navbar con 2 filas de derecho


    Actualización para el Bootstrap 4.0.0:

    https://www.codeply.com/go/05hEHoiUvv

    Este es un escenario alternativo con 2 barras de exploración con uno de los móviles toggler


    Bootstrap 4.0 – Dos barras de exploración que colapso en uno de alternar

    ¿Cómo puedo tener la Marca y el Navbar en líneas separadas?

    Cómo mover ‘nav’ elemento bajo «navbar» -marca » en mi Navbar

    Cómo colocar barra de navegación de abajo pegajosa barra de navegación utilizando bootstrap 4?

    Bootstrap 4 Múltiples fijo superior navbars

    Gracias a este funciona a la perfección!
    Segundo, no está funcionando

    OriginalEl autor Zim

  2. 2

    La «variación con la fila 2 alineado a la derecha» no se alinea a la derecha el de filas en Safari para mí. Pongo las listas no ordenadas en un nuevo div con el flex-column y ml-auto clases.

    <nav class="navbar navbar-toggleable-md navbar-inverse bg-inverse">
    <div class="container">
    <button class="navbar-toggler navbar-toggler-right align-self-center mt-3" type="button" data-toggle="collapse" data-target="#navbarCollapse"> <span class="navbar-toggler-icon"></span> </button>
    <h1 class="py-2 ml-lg-2 mx-3"><a href="#"><i class="fa fa-envelope-open-o fa-lg" aria-hidden="true"></i></a></h1>
    <div class="collapse navbar-collapse ml-lg-0 ml-3" id="navbarCollapse">
    <div class="flex-column ml-auto">
    <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="#">Product</a> </li>
    <li class="nav-item"> <a class="nav-link" href="#">Shop</a> </li>
    <li class="nav-item"> <a class="nav-link" href="#">About</a> </li>
    <li class="nav-item"> <a class="nav-link" href="#">Events</a> </li>
    </ul>
    <ul class="navbar-nav">
    <li class="nav-item"> <a class="nav-link pr-3" href="#"><i class="fa fa-facebook"></i></a> </li>
    <li class="nav-item"> <a class="nav-link pr-3" href="#"><i class="fa fa-instagram"></i></a> </li>
    <li class="nav-item"> <a class="nav-link pr-3" href="#"><i class="fa fa-twitter"></i></a> </li>
    </ul>
    </div>
    </div>
    </div>
    </nav>
    Es esta una pregunta o una respuesta?
    Ambos, supongo.

    OriginalEl autor zackfett

Dejar respuesta

Please enter your comment!
Please enter your name here