Me gustaría crear un plegable navbar. Todo funciona, pero el nav elementos no son apilados uno debajo de otro, como debe ser. Son horizontalmente uno al lado del otro.

Código:

<nav class="navbar navbar-light bg-faded" role="navigation">
    <button class="navbar-toggler hidden-sm-up" type="button" data-toggle="collapse" data-target="#collapsing-navbar">
        &#9776;
    </button>

    <div class="collapse navbar-toggleable-xs" id="collapsing-navbar">   
        <a class="navbar-brand" href="/">Logo</a>

        <ul class="nav navbar-nav">
            <li class="nav-item">
                <a href="/messages" class="nav-link">Messages</a>
            </li>

            <li class="nav-item">
                <a href="/logout" class="nav-link">Logout</a>
            </li>
        </ul>
    </div>
</nav>

Captura de pantalla:

Apilados plegable navbar en bootstrap 4

OriginalEl autor Iter Ator | 2015-11-02

4 Comentarios

  1. 20

    Bootstrap 4 Alpha 6 (ya que el alfa 6 versión apilados menú es creado sin necesidad de utilizar CSS extra):

    <nav class="navbar navbar-toggleable-md navbar-light bg-faded">
      <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <a class="navbar-brand" href="#">Navbar</a>
    
      <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav mr-auto">
          <li class="nav-item active">
            <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Link</a>
          </li>
          <li class="nav-item">
            <a class="nav-link disabled" href="#">Disabled</a>
          </li>
        </ul>
        <form class="form-inline my-2 my-lg-0">
          <input class="form-control mr-sm-2" type="text" placeholder="Search">
          <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
        </form>
      </div>
    </nav>

    CODEPEN

    Gracias. Será esto más tarde ser compatibles, o no hay ninguna posibilidad?
    Leer esto 🙂 github.com/twbs/bootstrap/issues/17250 el Tema es abierto.
    Alguna idea de lo que css habría que agregar para hacer este trabajo si hubo un segundo de barra de exploración en el código que se tiró a la derecha como con nav elementos en él? Si había una a la izquierda y a la derecha de la sección de su menú. <ul class=»nav navbar-nav «pull-right»></ul> Al expandir los escombros de la barra de navegación de cualquier nav elementos dentro de la barra, todavía se tiró a la derecha.
    Me gustaría añadir la clase a la barra de navegación izquierda (por ejemplo, mi-barra de navegación de la izquierda) y agregue esto a la CSS de modo que sólo se aplicaría a esta barra de navegación. Ejemplo: .my-navbar-left .navbar-nav .nav-item { float: none; }.
    Aquí es un ejemplo de a lo que me refería, el derecho nav artículos que todavía se tiró a la derecha cuando se expande en un tamaño de pantalla menor. codepen.io/anon/pen/qOyMWz se Debe establecer de manera diferente o utilizar css para ajustar a ellos?

    OriginalEl autor max

  2. 5

    parece que es más fácil de hacer con este CSS override:

    @media(max-width:768px) {
        .navbar .navbar-nav>.nav-item {
            float: none;
            margin-left: .1rem;
        }
        .navbar .navbar-nav {
            float:none !important;
        }
        .navbar .collapse.in, .navbar .collapsing  {
            clear:both;
        }
    }

    http://codeply.com/go/Ar1H2G4JVH

    ACTUALIZACIÓN

    Como de BS4 alfa 6, el CSS extra ya no es necesario. La barra de exploración de marcado ha cambiado.
    http://www.codeply.com/go/0OMz6nfPLr

    El uso de BS4 y esto funcionó para mí.

    OriginalEl autor Zim

  3. 3

    Como de Bootstrap 4 5 Alfa puede aprovechar un collapse plugin:

    http://v4-alpha.getbootstrap.com/components/navbar/

    <nav class="navbar navbar-light bg-faded">
    <button class="navbar-toggler hidden-lg-up" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation"></button>
    <div class="collapse navbar-toggleable-md" id="navbarResponsive">
    <a class="navbar-brand" href="#">Navbar</a>
    <ul class="nav navbar-nav">
    <li class="nav-item active">
    <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></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>
    <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" href="http://example.com" id="responsiveNavbarDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
    <div class="dropdown-menu" aria-labelledby="responsiveNavbarDropdown">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
    </div>
    </li>
    </ul>
    <form class="form-inline float-lg-right">
    <input class="form-control" type="text" placeholder="Search">
    <button class="btn btn-outline-success" type="submit">Search</button>
    </form>
    </div>
    </nav>

    OriginalEl autor mwilson

  4. 1

    Bootstrap 4 muestra un poco de experiencia de usuario diferente cuando plegable menú es de que se trate.

    En versión alpha parece este. Sin embargo, el problema sigue abierto Aquí, podemos ver algunos de los cambios en la próxima versión.

    OriginalEl autor Imran

Dejar respuesta

Please enter your comment!
Please enter your name here