css - div - Bootstrap 4 alinea los elementos de la barra de navegación a la derecha

alinear nav a la derecha bootstrap (18)

Busque la línea 69 en verndor-prefixes.less y escríbala 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); }

¿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 intento no parece funcionar.

Esto es lo que he intentado hasta ahora:

<div> alrededor de <ul> con el atributo: style="float: right"
<div> alrededor de <ul> con el atributo: style="text-align: right"
probé esas dos cosas en las etiquetas <li>
Probé todas esas cosas de nuevo con !important agregado al final
cambió nav-item de nav-right a nav-right en <li>
agregó una clase pull-sm-right a <li>
se agregó una clase align-content-end a <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>

El ejemplo de trabajo para 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>   <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>

El uso de la caja flexible bootstrap 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.

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

otra colocación puede incluir

fixed- top fixed bottom sticky-top

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

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

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

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

Por lo tanto, agregará justify-content-end al div y omitirá mr-auto en la lista.

Aquí hay un ejemplo de trabajo .

Estoy ejecutando Angular 4 (v.4.0.0) y ng-bootstrap (Bootstrap 4). Este código no será relevante, pero con la esperanza de que las personas puedan elegir lo que funciona. Me llevó 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 imagen de perfil de Google (usando OAuth).

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

Para Bootstrap 4 beta, la barra de navegación de muestra con elementos alineados al lado derecho 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>

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

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

Si desea Inicio, características y precios a la izquierda inmediatamente después de su nav-brand , y luego inicie sesión y regístrese a la derecha, envuelva las dos listas en <div> y use .justify-content-between :

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

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

Simplemente agregue la clase mr-auto en ul

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

Si tiene una lista de menú en ambos lados, 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>

Solo copié esto de una de las páginas de getbootstrap para la versión lanzada 4 que funcionó mucho mejor que la 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>

Soy nuevo en el desbordamiento de pila y nuevo en el desarrollo front-end. Esto es lo que funcionó para mí. Así que no quería que se mostraran los elementos de la lista.

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

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

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

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

usa la clase flex-row-reverse

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

Bootstrap 4 tiene muchas formas diferentes de alinear 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 navbar-nav (izquierda). Alternativamente , ml-auto podría usarse en la segunda navbar-nav (derecha), o si solo tiene una única 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 utilidades de flexbox. En este caso, tiene 2 navbar-nav s, por lo que navbar-nav 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 Bootstrap 4.0 y más reciente

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

http://www.codeply.com/go/P0G393rzfm actualizada a la http://www.codeply.com/go/P0G393rzfm

Otro escenario frecuente de alineación a la derecha de la barra de navegación de Bootstrap 4 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

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

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

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