¿Cómo puedo alinear una barra de navegación punto a la derecha?

Quiero tener el inicio de sesión y registro a la derecha.
Pero todo lo que intente no parece funcionar.

Bootstrap 4 alinee la barra de navegación de los elementos a la derecha

Esto es lo que he intentado hasta ahora:

  • <div> alrededor de la <ul> con el atributo: style="float: right"
  • <div> alrededor de la <ul> con el atributo: style="text-align: right"
  • trató de esas dos cosas en la <li> etiquetas
  • intentado todas esas cosas de nuevo con !important agrega al final
  • cambiado nav-item a nav-right en el <li>
  • añadido un pull-sm-right de la clase a la <li>
  • añadido un align-content-end de la clase a la <li>

Este es mi código:

<div id="app" class="container">
  <nav class="navbar navbar-toggleable-md navbar-light bg-faded">
    <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <a class="navbar-brand" href="#">Navbar</a>
    <ul class="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="#">Features</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Pricingg</a>
      </li>
    </ul>
    <ul class="navbar-nav " >
      <li  class="nav-item">
        <a class="nav-link" href="{{ url('/login') }}">Login</a>
      </li>
      <li  class="nav-item">
        <a class="nav-link" href="{{ url('/register') }}">Register</a>
      </li>
    </ul>
  </nav>
  @yield('content')
</div>
  • Navbars se construyen con flexbox de alpha 6 de la versión.
  • Sí, entonces, ¿qué tengo que hacer para conseguir que se alinee a la derecha. Yo ya he probado un par de flexbox cosas sin mucha suerte. :/

20 Comentarios

  1. 446

    Bootstrap 4 ha muchos diferentes maneras de alinear la barra de navegación, elementos de. float-right no va a funcionar porque la navbar es ahora flexbox.

    Puede utilizar el nuevo mr-auto para auto margen derecho en el 1 de (a la izquierda) navbar-nav.
    Alternativamente, ml-auto podría ser utilizado en el (a la derecha) navbar-nav , o si usted acaba de tener una sola navbar-nav.

    <div id="app" class="container">
      <nav class="navbar navbar-toggleable-md navbar-light bg-faded">
        <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        <a class="navbar-brand" href="#">Navbar</a>
        <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="#">Features</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Pricingg</a>
          </li>
        </ul>
        <ul class="navbar-nav">
          <li class="nav-item">
            <a class="nav-link" href="{{ url('/login') }}">Login</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="{{ url('/register') }}">Register</a>
          </li>
        </ul>
      </nav>
    </div>

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

    También hay flexbox utils. En este caso, usted tiene 2 navbar-navs, por lo que justify-content-between en navbar-collapse funcionaría incluso el espacio entre ellos,

     <div class="navbar-collapse collapse justify-content-between">
         <ul class="navbar-nav mr-auto">
                   ..
         </ul>
         <ul class="navbar-nav">
               ..
         </ul>
     </div>


    Actualización para el Bootstrap 4.0 y superior

    Como de Bootstrap 4 beta, ml-auto todavía va a trabajar para impulsar los elementos a la derecha. Acaba de ser conscientes de la navbar-toggleable- clases han cambiado a navbar-expand-*

    Actualizado barra de navegación de la derecha para Bootstrap 4


    Otro frecuentes Bootstrap 4 barra de navegación de la alineación a la derecha escenario incluye un botón de la derecha que permanece fuera del móvil colapso de navegación de modo que siempre se muestra en todos los anchos.

    A la derecha alinear el botón que está siempre visible

    Bootstrap 4 alinee la barra de navegación de los elementos a la derecha

    Bootstrap 4 alinee la barra de navegación de los elementos a la derecha


    Relacionados con: Bootstrap barra de navegación de la izquierda, centro o derecha alineado elementos

    • mr-auto no funciona si el de la derecha es un elemento dropdown. Los elementos de lista desplegable de derrame sobre el borde derecho de la página.
    • Funciona: codeply.com/go/P0G393rzfm – el problema no es mr-auto como la pregunta es acerca de la alineación de derecho que funciona. Publicar una nueva pregunta si usted tiene preocupaciones con la lista desplegable, pero es más probable refiriéndose a este tema: stackoverflow.com/questions/43867258/…
    • También puede agregar .dropdown-menu-right a alineado a la derecha listas desplegables en la barra de navegación. De no hacerlo así, puede cortar el menú desplegable en ciertos anchos.
    • gracias por sus respuestas. He estado siguiendo tu respuesta por aquí, stackoverflow.com/questions/19733447/… . Tengo una pregunta ¿cómo puedo conseguir un punto para estar en el lado izquierdo y un elemento en el lado derecho ?
    • En codeply.com/go/P0G393rzfm, ha mostrado uno de ul en la izquierda y uno de la ul de la derecha. Que se logra mediante la adición de señor-auto a la primera. Pero lo que si tengo sólo uno de ul? No quiero crear un vacío ul sólo para la alineación de otra a la derecha.
    • Has leído la parte en la que dice que el uso de ml-auto?
    • .de justificar-contenido-entre trabajó como un encanto. Gracias.

  2. 123

    En mi caso, yo quería simplemente un conjunto de botones de navegación /opciones y encontré que esto va a funcionar:

    <div class="collapse navbar-collapse justify-content-end" id="navbarCollapse">
      <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link" href="#">Sign Out</a>
        </li>
      </ul>
    </div>

    Así que, va a agregar justify-content-end para el div y omitir mr-auto en la lista.

    Aquí es un ejemplo de trabajo.

    • En la OPs ejemplo, utiliza dos elementos dentro de la nav, alineando uno izquierdo y uno derecho; donde usé sólo una y alineado a la derecha. No es la respuesta correcta, pero es útil como una respuesta a una ligera variación de la pregunta 😉
    • Esto funciona para un solo navbar-nav, pero el mr-auto método se utiliza en el Bootstrap docs.
    • mr-auto se utiliza en google docs, pero no para alinear los elementos a la izquierda. Esta respuesta es semánticamente correcto, como se menciona en este artículo: blog.getbootstrap.com/2017/01/06/bootstrap-4-alpha-6
    • La cuestión es que están tratando de alinear 2 lista de enlaces o 1. Si tan sólo el 1, su respuesta obras y fue muy útil para mí. Gracias!
    • A mí me funcionó, pero no sé por qué, la de arriba esta respuesta no funciona.
    • float-right funciona de la misma manera como justify-content-end , mientras mr-auto es eliminado.

  3. 43

    Para aquellos que todavía está luchando con este problema en BS4 simplemente tratar a continuación el código –

    <ul class="navbar-nav ml-auto">
    • Sin que se alinea todo a la derecha. La pregunta dice que él sólo quiere alinear un solo elemento a la derecha.
    • Consulte el funcionario doc sobre el m*-auto empuja el contenido a la izquierda o a la derecha dependiendo de donde pongas la clase
  4. 35

    En Bootstrap 4

    Si quieres alinear la marca a su izquierda y a todos los de la barra de exploración-los elementos a la derecha, cambie el valor predeterminado mr-auto a ml-auto

    <ul class="navbar-nav ml-auto">
    • Simple y funciona!
  5. 27

    Sobre Bootsrap 4.0.0-beta.2, ninguna de las respuestas aparecen aquí trabajó para mí. Finalmente, el Bootstrap sitio me dio la solución, no a través de su doc, pero a través de su código fuente de la página…

    Getbootstrap.com alinear su derecho navbar-nav a la derecha con la ayuda de la siguiente clase: ml-md-auto.

    • Trabajó muy bien para mí. Nada más hizo.
  6. 6

    Si quieres Hogar, Características y Precios en la izquierda inmediatamente después de su nav-brand y, a continuación, inicio de sesión y registro a la derecha, a continuación, envuelva las dos listas en <div> y uso .justify-content-between:

    <div class="collapse navbar-collapse justify-content-between">
    <ul>....</ul>
    <ul>...</ul>
    </div>
  7. 5

    Sólo añadir mr-auto de la clase a ul

    <ul class="nav navbar-nav mr-auto">

    Si usted tiene la lista de menú en ambos lados, se puede hacer algo como esto:

    <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>
            <ul class="navbar-nav ml-auto">
                <li class="nav-item active">
                    <a class="nav-link" href="#">left 1</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">left 2</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link disabled" href="#">left disable</a>
                </li>
            </ul>
  8. 4

    usar el flex-fila-a la inversa de la clase

    <nav class="navbar navbar-toggleable-md navbar-light">
        <div class="container">
            <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false"
              aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <a class="navbar-brand" href="#">
                <i class="fa fa-hospital-o fa-2x" aria-hidden="true"></i>
            </a>
            <div class="collapse navbar-collapse flex-row-reverse" id="navbarNavAltMarkup">
                <ul class="navbar-nav">
                    <li><a class="nav-item nav-link active" href="#" style="background-color:#666">Home <span class="sr-only">(current)</span></a</li>
                    <li><a class="nav-item nav-link" href="#">Doctors</a></li>
                    <li><a class="nav-item nav-link" href="#">Specialists</a></li>
                    <li><a class="nav-item nav-link" href="#">About</a></li>
                </ul>
            </div>
        </div>
    </nav>
  9. 2

    Utilizar este código para mover los elementos a la derecha.

    div class="collapse navbar-collapse justify-content-end" 
    • que no va a funcionar cuando usted tiene un Menú colapsado, sin embargo, con la ml-auto va a funcionar porque cuando el menú se derrumbó, el <li> elementos que todavía tomar el 100% de la anchura de lo que no hay margen de ser aplicado.
    • Su trabajo en bootstrap 4…
  10. 0

    Estoy corriendo Angular 4 (v. 4.0.0) y ng-arranque (Bootstrap 4). Este código no puede ser relevante, pero con la esperanza de que la gente puede escoger y elegir lo que funciona. Me tomó algún tiempo para encontrar una solución para conseguir mis cosas para justificar a la derecha, colapso correctamente y para implementar un desplegable de mi google (usando OAuth) foto de perfil.

    <div id="header" class="header">
    <nav class="navbar navbar-toggleable-sm navbar-inverse bg-faded fixed-top">
    <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="#">
    <img alt='Brand' src='../assets/images/logo-white.png' class='navbar-logo-img d-inline-block align-top '>
    <span class="navbar-logo-text">Oncoscape</span>
    </a>
    <div class="collapse navbar-collapse justify-content-end" id="navbarSupportedContent">
    <ul class="navbar-nav float-left">
    <a class="navbar-items nav-item nav-link active " *ngIf='authenticated' (click)='goDashboard()'>
    <span class="fa fa-dashboard"></span>Dashboard
    </a>
    <a class="nav-item nav-link navbar-items active" href="http://resources.sttrcancer.org/oncoscape-contact">
    <span class="fa fa-comments"></span>Feedback
    </a>
    <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <img *ngIf='user && authenticated'  class="navbar-pic" src={{user.thumbnail}} alt="Smiley face">
    </a>
    <div *ngIf='user && authenticated' class="dropdown-menu " aria-labelledby="navbarDropdownMenuLink">
    <a class="dropdown-item" (click)="toProfile()">Account</a>
    <div class="dropdown-item">
    <app-login></app-login>
    </div>
    </div>
    </li>
    </ul>
    </div>
    </nav>
    </div>
    <router-outlet></router-outlet>
  11. 0

    Para el Bootstrap 4 beta, ejemplo de barra de exploración con elementos alineados a la derecha es:

    <div id="app" class="container">
    <nav class="navbar navbar-expand-md navbar-light bg-faded">
    <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
    </button>
    <a class="navbar-brand" href="#">Navbar</a>
    <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="#">Features</a>
    </li>
    <li class="nav-item">
    <a class="nav-link" href="#">Pricingg</a>
    </li>
    </ul>
    <ul class="navbar-nav">
    <li class="nav-item">
    <a class="nav-link" href="{{ url('/login') }}">Login</a>
    </li>
    <li class="nav-item">
    <a class="nav-link" href="{{ url('/register') }}">Register</a>
    </li>
    </ul>
    </nav>
    </div>
  12. 0

    Utilizando el bootstrap flex cuadro de ayuda
    controlar la colocación y alineación de su elemento de navegación.
    para el problema anterior añadiendo mr-auto es una mejor solución a la misma .

    <div id="app" class="container">
    <nav class="navbar navbar-toggleable-md navbar-light bg-faded">
    <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
    </button>
    <a class="navbar-brand" href="#">Navbar</a>
    <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="#">Features</a>
    </li>
    <li class="nav-item">
    <a class="nav-link" href="#">Pricingg</a>
    </li>
    </ul>
    <ul class="navbar-nav  " >
    <li  class="nav-item">
    <a class="nav-link" href="{{ url('/login') }}">Login</a>
    </li>
    <li  class="nav-item">
    <a class="nav-link" href="{{ url('/register') }}">Register</a>
    </li>
    </ul>
    </nav>
    @yield('content')
    </div>

    otras ubicaciones pueden incluir

    fixed- top
    fixed bottom
    sticky-top
  13. 0

    El ejemplo de trabajo de BS v4.0.0-beta.2:

    <body>
    <nav class="navbar navbar-expand-md navbar-dark bg-dark">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNavDropdown">
    <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="#">Features</a>
    </li>
    <li class="nav-item">
    <a class="nav-link" href="#">Pricingg</a>
    </li>
    </ul>
    <ul class="navbar-nav">
    <li class="nav-item">
    <a class="nav-link" href="#">Login</a>
    </li>
    <li class="nav-item">
    <a class="nav-link" href="#">Register</a>
    </li>
    </ul>
    </div>
    </nav>
    <div class="container-fluid">
    container content
    </div>
    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="node_modules/jquery/dist/jquery.slim.min.js"></script>
    <script src="node_modules/popper.js/dist/umd/popper.min.js"></script>
    <script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
    </body>
  14. 0

    Si todo lo anterior falla, he añadido el 100% de la anchura de la barra de navegación de clase en el CSS. Hasta entonces mr auto no estaba trabajando para mí en este proyecto con 4.1.

  15. 0

    Es poco cambio en boostrap 4.
    Para alinear la barra de navegación a la derecha, usted tiene que hacer sólo dos cambios.
    ellos son:

    1. en navbar-nav clase de añadir w-100 como navbar-nav w-100 para hacer que la anchura de 100
    2. en nav-item dropdown clase de añadir ml-auto como nav-item dropdown ml-auto para hacer de la margen izquierda como auto.

    Si usted no entiende, por favor refiérase a la imagen que he adjuntado a este.

    CodePen Enlace

    Bootstrap 4 alinee la barra de navegación de los elementos a la derecha

    Código fuente completo

    <nav class="navbar navbar-expand-lg navbar-light bg-light">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNavDropdown">
    <ul class="navbar-nav w-100">
    <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="#">Features</a>
    </li>
    <li class="nav-item">
    <a class="nav-link" href="#">Pricing</a>
    </li>
    <li class="nav-item dropdown ml-auto">
    <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown link
    </a>
    <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
    <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>  
    </div>
    </nav>
  16. 0

    Para el bootstrap 4.3.1, yo estaba usando nav-pastillas y nada funcionó para mí, excepto esto:

        <ul class="nav nav-pills justify-content-end ml-auto">
    <li ....</li>
    </ul>
  17. -1

    Encontrar el 69 línea en el verndor-prefijos.menos y escribir lo siguiente:

    CSS:

    .panel {
    margin-bottom: 20px;
    height: 100px;
    background-color: #fff;
    border: 1px solid transparent;
    border-radius: 4px;
    -webkit-box-shadow: 0 1px 1px rgba(0,0,0,.05);
    box-shadow: 0 1px 1px rgba(0,0,0,.05);
    }

    • Esto no es ni siquiera el código de inicio.
  18. -2

    Sólo una copia de uno de los getbootstrap páginas de la versión 4, que funcionó mucho mejor que el anterior

    <div class="d-none d-xl-block col-xl-2 bd-toc float-md-right">
    <ul class="section-nav">
    <li class="toc-entry toc-h2"><a href="#overview">Overview</a></li>
    <li class="toc-entry toc-h2"><a href="#classes">Classes</a></li>
    <li class="toc-entry toc-h2"><a href="#mixins">Mixins</a></li>
    <li class="toc-entry toc-h2"><a href="#responsive">Responsive</a></li>
    </ul>
    </div> 
  19. -3

    Soy nuevo en el desbordamiento de la pila y de nuevo para desarrollo front-end. Esto es lo que ha funcionado para mí. Así que no quiero que los elementos de la lista que se mostrará.

    .hidden {
    display:none;
    } 
    #loginButton{
    margin-right:2px;
    }
    <nav class="navbar navbar-toggleable-md navbar-light bg-faded fixed-top">
    <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 hidden">
    <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
    </li>
    <li class="nav-item hidden">
    <a class="nav-link" href="#">Link</a>
    </li>
    <li class="nav-item hidden">
    <a class="nav-link disabled" href="#">Disabled</a>
    </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
    <button class="btn btn-outline-success my-2 my-sm-0" type="submit" id="loginButton"><a href="#">Log In</a></button>
    <button class="btn btn-outline-success my-2 my-sm-0" type="submit"><a href="#">Register</a></button>
    </form>
    </div>
    </nav>

Dejar respuesta

Please enter your comment!
Please enter your name here