Skip to main content
4 de 5
El código se puede ejecutar ahora, correcciones de gramática y añadir tags de CSS

¿Como puedo alinear algunos componentes de un navbar de bootstrap3 a la izquierda y otros a la derecha?

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?

Alan
  • 2.3k
  • 2
  • 25
  • 37