8

Partiendo de un navbar de Bootstrap estándar necesitamos que algunos botones o links estén alineados a la izquierda, otros al centro (por ejemplo: nuestro icono brand) y otros a la derecha.

Esto fue lo primero que intenté hacer:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<nav class="navbar navbar-default" role="navigation">
  <div class="navbar-header">
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>    
  </div>
  <div class="navbar-collapse collapse">
    <ul class="nav navbar-nav">
      <li class="navbar-left"><a href="#">Izquierda 1</a></li>
      <li class="navbar-left"><a href="#">Izquierda 2</a></li>
      <li class="active"><a href="#">Center 1</a></li>
      <li><a href="#">Center</a></li>
      <li class="navbar-right"><a href="#">Derecha 1</a></li>
      <li class="navbar-right"><a href="#">Derecha 2</a></li>
    </ul>
  </div>
</nav>

Buscando en la documentación de Bootstrap 3 no encontré ningún ejemplo o idea de cómo lograrlo. ¿Cómo se podría hacer?

4 respuestas 4

9

Una solución sin necesidad de que modifiques tu estructura html es usar .pull-right si el li va a la derecha y .pull-left si va a la izquierda y colocando este script:

  .navbar-nav {
    width: 100%;
    text-align: center;

  }

  .navbar-nav > li {
      float: none;
      display: inline-block;
    }

Que nos permite comenzar con todos los <li> centrados y luego los jalamos a la derechera y/o izquierda lo que necesitamos.

El final el HTML quedaría así:

<nav class="navbar navbar-default" role="navigation">
  <div class="navbar-header">
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>    
  </div>
  <div class="navbar-collapse collapse">
    <ul class="nav navbar-nav">
      <li class="pull-left"><a href="#">Izquierda 1</a></li>
      <li class="pull-left"><a href="#">Izquierda 2</a></li>
      <li class="active"><a href="#">Center 1</a></li>
      <li><a href="#">Center</a></li>
      <li class="pull-right"><a href="#">Derecha 1</a></li>
      <li class="pull-right"><a href="#">Derecha 2</a></li>
    </ul>
  </div>
</nav>

Ejemplo en vivo

2
  • Gracias por tu respuesta, me parece mas limpia que la mía.
    – Alan
    Commented el 17 dic. 2015 a las 16:02
  • @Ala Gracias la tuya también es valida.
    – Wilfredo
    Commented el 17 dic. 2015 a las 16:07
0

Esta es una de las soluciones que encontré:

Lo que podemos hacer para lograr alinear cada boton a nuestro gusto es separarlos en varios <ul> con su clase correspondiente de bootstrap

En este ejemplo alineamos a la derecha 2 links, centramos el brand y dos links más alineados a la derecha.

http://www.bootply.com/SlF4kleQfG

<nav class="navbar navbar-default" role="navigation">
  <div class="navbar-header">
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>    
  </div>
  <a class="navbar-brand" href="#">Brand</a>
  <div class="navbar-collapse collapse">
    <ul class="nav navbar-nav navbar-left">
        <li><a href="#">Izquierda</a></li>
        <li><a href="#about">Izquierda</a></li>
    </ul>
    <ul class="nav navbar-nav navbar-right">
      <li><a href="#about">Derecha</a></li>
      <li><a href="#contact">Derecha</a></li>
    </ul>
  </div>
</nav>

CSS:

.navbar-brand
{
    position:absolute;
    width:100%;
    left:0;
    text-align:center;
    margin:auto;
}
0

Algo sencillo aunque desprolijo es separar los ul con un div con una rejilla de las que vienen definidas en bootstrap:

<ul>
 <li></li>
</ul>
<div class="col-md-5"></div>
<ul>
 <li></li>
</ul>

A mí me funcionó perfecto. Saludos.

-1

Existe, si no estoy mal, una clase pull-left y pull-right para hacer que el componente que posea esa clase flote a la derecha o a la izquierda, además existen mixins para incluir eso en less.

Para mas información puedes verificar la sección Clases de Ayuda, Flotantes rápidos, donde puedes encontrar más información al respecto.

5
  • 1
    float-left y float-right no son clases.
    – Alan
    Commented el 31 mar. 2016 a las 13:35
  • Entonces como se les llama?
    – SalahAdDin
    Commented el 31 mar. 2016 a las 19:04
  • Es una propiedad
    – Alan
    Commented el 31 mar. 2016 a las 19:06
  • No, me refiero a las clases pull-right y pull-left, clases auxiliares según veo en Bootstrap, que sirven para poner cualquier elemento en con bloque flotante a izquierda o derecha.
    – SalahAdDin
    Commented el 1 abr. 2016 a las 4:30
  • ahora sí, gracias por tu aporte.
    – Alan
    Commented el 1 abr. 2016 a las 12:27

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.