¿Cómo puedo alinear un elemento de la barra de navegación a la derecha?
Quiero tener el inicio de sesión y el registro a la derecha. Pero todo lo que intento no parece funcionar.
<div>
alrededor del <ul>
con el atributo style="float: right"
<div>
alrededor de la <ul>
con el atributo style="text-align: right"
<li>
.!important
al finalnav-item
por nav-right
en el <li>
pull-sm-right
a la sección <li>
.<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>
Bootstrap 4 tiene muchas formas diferentes de alinear los elementos de la navbar. El sistema de alineación "float-right" no funcionará porque la barra de navegación es ahora "flexible".
Puedes usar el nuevo mr-auto
para el margen derecho automático en la primera (izquierda) navbar-nav
.
Alternativamente, ml-auto
puede ser usado en la 2ª (derecha) navbar-nav
, o si sólo tienes 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, tienes 2 navbar-nav
s, por lo que justify-content-between
en navbar-collapse
funcionaría para igualar el espacio entre ellas,
<div class="navbar-collapse collapse justify-content-between">
<ul class="navbar-nav mr-auto">
..
</ul>
<ul class="navbar-nav">
..
</ul>
</div>
A partir de Bootstrap 4 beta, ml-auto
seguirá funcionando para empujar los elementos a la derecha. Sólo ten en cuenta que las clases navbar-toggleable-
han cambiado a navbar-expand-*
.
Actualizado navbar right for Bootstrap 4
Otro escenario frecuente de alineación de la barra de navegación de Bootstrap 4 incluye un botón a la derecha que permanece fuera del colapso móvil nav para que siempre se muestre en todos los anchos.
Botón de alineación a la derecha que siempre está visible
[]
En mi caso, quería sólo 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>
Por lo tanto, añadirá justify-content-end
al div y omitirá mr-auto
en la lista.
Aquí hay un ejemplo de trabajo.
Soy nuevo en stack overflow y nuevo en el desarrollo del front end. Esto es lo que me ha funcionado. Así que no quería que se mostraran los elementos de la lista.
begin snippet: js hide: false console: true babel: false -->
.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>
Fin del fragmento;