Bootstrap 4 alinea los artículos de la barra de navegación a la derecha

¿Cómo alineo un elemento de la barra de navegación a la derecha?

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

Imagen de Navbar

Esto es lo que he intentado hasta ahora:

  • alrededor de

      con el atributo: style="float: right"
    • alrededor de

        con el atributo: style="text-align: right"
      • intenté esas dos cosas en las tags
      • intenté todas esas cosas de nuevo con !important agregado al final
      • cambiado nav-item a nav-right en el
      • agregó una clase pull-sm-right al
      • se agregó una clase align-content-end al

      Este es mi código:

        

      Bootstrap 4 tiene muchas formas diferentes de alinear los elementos de la barra de navegación . float-right no funcionará porque la barra de navegación ahora es flexbox .

      Puede usar el nuevo mr-auto para el margen derecho automático en la primera (izquierda) navbar-nav . Alternativamente , ml-auto podría usarse en la segunda (derecha) navbar-nav , o si solo tiene una sola navbar-nav .

        

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

      También hay utilidades de flexbox. En este caso, tienes 2 navbar-nav s, entonces navbar-nav justify-content-between en navbar-collapse funcionaría incluso el espacio entre ellos,

         


      Actualización para Bootstrap 4.0 y más reciente

      A partir de Bootstrap 4 beta, ml-auto seguirá funcionando para empujar los elementos a la derecha. Solo tenga en cuenta que las clases navbar-toggleable- han cambiado a navbar-expand-*

      Barra de navegación actualizada derecha para Bootstrap 4


      Otro escenario frecuente de alineación a la derecha de Bootstrap 4 Navbar incluye un botón a la derecha que permanece fuera del navegador de colapso móvil para que siempre se muestre en todos los anchos.

      Botón de alineación derecha que siempre está visible

      enter image description here

      enter image description here


      Relacionado: Bootstrap NavBar con elementos alineados a la izquierda, centro o derecha

    • En mi caso, quería solo un conjunto de botones / opciones de navegación y descubrí que esto funcionaría:

        

      Entonces, agregará justify-content-end al div y omitrá mr-auto en la lista.

      Aquí hay un ejemplo de trabajo .

      En Bootsrap 4.0.0-beta.2 , ninguna de las respuestas enumeradas aquí funcionó para mí. Finalmente, el sitio de Bootstrap me dio la solución, no a través de su documento sino a través de su código fuente de página …

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

      Para aquellos que todavía están luchando con este problema en BS4, simplemente prueben el siguiente código:

        

      En Bootstrap 4

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

        

      Use ml-auto lugar de mr-auto después de aplicar nav justify-content-end al ul

      usa la clase flex-row-reverse

        

      Si desea Inicio, Características y precios a la izquierda inmediatamente después de su nav-brand , y luego iniciar sesión y registrarse en la derecha, ajuste las dos listas en

      y use .justify-content-between :

        

      Solo agrega la clase mr-auto en ul

        

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

         

      Use este código para mover elementos a la derecha.

       div class="collapse navbar-collapse justify-content-end" 

      Estoy ejecutando Angular 4 (v.4.0.0) y ng-bootstrap (Bootstrap 4). Este código no será relevante, pero espera que las personas puedan escoger y elegir qué funciona. Me tomó algún tiempo encontrar una solución para hacer que mis artículos se justificaran correctamente, colapsar correctamente e implementar un menú desplegable de mi foto de perfil de google (usando OAuth).

         

      Para Bootstrap 4 beta, la barra de navegación de muestra con elementos alineados al lado derecho es:

        

      El uso del cuadro de arranque de flexión nos ayuda a controlar la ubicación y la alineación de su elemento de navegación. para el problema anterior, agregar mr-auto es una mejor solución.

        

      otra colocación puede incluir

       fixed- top fixed bottom sticky-top 

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

         
      container content

      Encuentra la línea 69 en el verndor-prefixes.less y escríbela a continuación:

       .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); } 

      Acabo de copiar esto de una de las páginas de getbootstrap para la versión 4 publicada que funcionó mucho mejor que la anterior

        

      Si todo lo anterior falla, agregué 100% de ancho a la clase de la barra de navegación en CSS. Hasta entonces, mr auto no funcionaba para mí en este proyecto usando 4.1.

      Soy nuevo en el desbordamiento de la stack y nuevo en el desarrollo de la interfaz. Esto es lo que funcionó para mí. Así que no quería que se muestren los elementos de la lista.

       .hidden { display:none; } #loginButton{ margin-right:2px; }