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

341

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

Imagen de Navbar

Esto es lo que he intentado hasta ahora:

  • <div>alrededor del <ul>con el atributo:style="float: right"
  • <div>alrededor del <ul>con el atributo:style="text-align: right"
  • probé esas dos cosas en las <li>etiquetas
  • intentado todas esas cosas nuevamente con !importantagregado al final
  • cambiado nav-itema nav-righten el<li>
  • añadido una pull-sm-rightclase a la<li>
  • añadido una align-content-endclase 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>
css twitter-bootstrap flexbox bootstrap-4 navbar Luuk Wuijster
fuente
Las barras de navegación están construidas con flexbox de la versión alpha 6.
max
1
Sí, entonces, ¿qué tengo que hacer para que se alinee a la derecha? Ya he probado un par de cosas de flexbox sin suerte. : /
Luuk Wuijster

Respuestas:

528

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

Puede usar mr-autoel margen derecho automático en el 1er (izquierdo) navbar-nav. Alternativamente , ml-autopodría usarse en el segundo (derecha) navbar-nav, o si solo tiene uno navbar-nav.

<nav class="navbar navbar-expand-md navbar-light bg-light">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
        <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="#">Pricing</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>
    </div>
</nav>

https://codeply.com/go/P0G393rzfm

También hay utilidades de flexbox. En este caso, usted tiene 2 navbar-navs, por lo que justify-content-betweenen navbar-collapsefuncionaría el 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-autoseguirá funcionando para empujar elementos hacia la derecha. Solo ten en cuenta que elnavbar-toggleable- clases han cambiado anavbar-expand-*

Barra de navegación actualizada a la derecha para Bootstrap 4

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

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

ingrese la descripción de la imagen aquí

ingrese la descripción de la imagen aquí

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

Zim
fuente
1
mr-autono funciona si el elemento más a la derecha es a dropdown. Los elementos desplegables se derraman sobre el borde derecho de la página.
Ege Ersoz
66
Funciona: codeply.com/go/P0G393rzfm : el problema no es mr-autoque la pregunta sea sobre la alineación correcta que funciona. Publique una nueva pregunta si tiene dudas sobre el menú desplegable, pero lo más probable es que se refiera a este problema: stackoverflow.com/questions/43867258/…
Zim,
2
También puede agregar .dropdown-menu-righta menús desplegables alineados a la derecha en la barra de navegación. No hacerlo puede cortar el menú desplegable en ciertos anchos.
rybo111
@ ZimSystem gracias por sus respuestas. He estado siguiendo tu respuesta aquí stackoverflow.com/questions/19733447/… . Tengo una pregunta, ¿cómo puedo lograr que un elemento esté en el lado izquierdo y otro en el lado derecho?
Lokesh Pandey
En codeply.com/go/P0G393rzfm , ha mostrado una ul a la izquierda y una ul a la derecha. Eso se logró agregando mr-auto al primero. Pero, ¿qué pasa si solo tengo un ul? No quiero crear un ul vacío solo para alinear otro a la derecha.
Santosh Kumar
140

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>

Entonces, agregará justify-content-endal div y omitirá mr-autoen la lista.

Aquí hay un ejemplo de trabajo .

Craig van Tonder
fuente
3
@numediaweb En el ejemplo de OP, usa dos elementos dentro del navegador, alineando uno a la izquierda y otro a la derecha; donde usé solo uno y lo alineé a la derecha. No es la respuesta correcta, pero es útil como respuesta a una ligera variación de la pregunta;)
Craig van Tonder
Esto funciona para una única barra de navegación, pero el mr-autométodo se usa en los documentos de Bootstrap .
Zim
mr-autose usa en documentos, pero no para alinear elementos a la izquierda. Esta respuesta es semánticamente correcta como se menciona en este artículo: blog.getbootstrap.com/2017/01/06/bootstrap-4-alpha-6
qwaz
La pregunta es si está tratando de alinear 2 listas de enlaces o 1. Si solo 1, su respuesta funciona y fue muy útil para mí. ¡Gracias!
barefootsanders
Funcionó para mí, pero no sé por qué el que está arriba de esta respuesta no funciona.
Suhail Akhtar
59

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">
Muhammad Tarique
fuente
77
No, eso alinea todo a la derecha. La pregunta dice que solo quiere alinear un solo elemento a la derecha.
NickG
2
Verifique que el documento oficial al respecto m*-autoempuje el contenido hacia la izquierda o hacia la derecha dependiendo de dónde coloque la clase
Pierre de LESPINAY
@PierredeLESPINAY, sí ml-auto, empuja el contenido a la posición más adecuada, pero me preguntaba ¿por qué mr-0no puedo hacer el trabajo?
aguacate
42

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 valor predeterminado mr-autoaml-auto

<ul class="navbar-nav ml-auto">
geet Sebastian
fuente
32

El 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 align su derecho navbar-nava la derecha con la ayuda de la clase siguiente: ml-md-auto.

ClemC
fuente
1
Funcionó muy bien para mí. Nada más lo hizo.
Maria Campbell
14

Use en ml-autolugar de mr-autodespués de aplicar navjustify-content-end alul

James Pike
fuente
9

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

<div class="collapse navbar-collapse justify-content-end">
Maijied Hasan Shuvo
fuente
1
eso no funcionará cuando tenga un menú contraído, sin embargo, con el ml-auto seguirá funcionando porque cuando el menú está contraído, los elementos <li> aún ocupan el 100% del ancho, por lo que no se aplicará ningún margen.
Ryan S
8

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, luego envuelva las dos listas <div>y use .justify-content-between:

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

Solo agregue mr-autoclase 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>
SKL
fuente
5

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>
mubsher
fuente
2

Es un pequeño cambio en boostrap 4. Para alinear la barra de navegación al lado derecho, solo debe hacer dos cambios. son:

  1. en navbar-navclase agregue w-100como navbar-nav w-100para hacer un ancho de 100
  2. en nav-item dropdownclase agregue ml-autocomo nav-item dropdown ml-autopara dejar margen como automático.

Si no entendió, consulte la imagen que adjunto a esto.

Enlace CodePen

ingrese la descripción de la imagen aquí

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>
Anand Raja
fuente
2

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

    <ul class="nav nav-pills justify-content-end ml-auto">
    <li ....</li>
    </ul>
Ajay Kumar
fuente
2

En v4.3 arranque sólo tiene que añadir ml-autoen <ul class="navbar-nav"> Ex:<ul class="navbar-nav ml-auto">

Mohit Prajapati
fuente
0

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>
GrettyGoose
fuente
0

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>
Kaczor
fuente
0

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
maro
fuente
0

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>
belgoros
fuente
0

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.

Dominic Davies
fuente
-1

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);
}
Expandir fragmento

Pablo
fuente
-2

Solo copié esto de una de las páginas de getbootstrap para la versión 4 lanzada 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>
Gary Molton
fuente
-3

Soy nuevo en el desbordamiento de pila y nuevo en el desarrollo front-end. Esto es lo que funcionó para mí. Por lo tanto, 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>

MSangha
fuente