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
!importantagregado al final -
cambió
nav-itemdenav-rightanav-righten<li> -
agregó una clase
pull-sm-righta<li> -
se agregó una clase
align-content-enda<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>
<!-- 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>
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">