1

¿Cómo puedo colocar los elementos de un navbar a medida que queden bien colocados y que el último elemento quede al final del navbar? Sobra un espacio entre el último elemento y el final del navbar y no se ve muy bien.

Éste es mi código (pulsar en "Página completa" para ver el error):

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">

<nav class="navbar navbar-default navbar-inverse " >
  <div class="navbar-header " id="navigation">
    <ul class="nav nav-pills ">
       <li role="presentation" class="pull-left active"><a href="index.html"><h4> INICIO</h4></a></li>
       <li role="presentation" class="pull-left active"><a href="pacas.html"><h4> VENTA DE ROPA EN PACAS</h4></a></li>
       <li role="presentation" class="active active"><a href="varon.html"><h4> VENTA DE ROPA PARA VARON</h4></a></li>
       <li role="presentation" class="active"><a href="dama.html"><h4> VENTA DE ROPA PARA DAMA</h4></a></li>
       <li role="presentation" class="pull-right active"><a href="nino.html"><h4>VENTA DE ROPA PARA NIÑO</h4></a></li>
   </ul>
 </div>
</nav>

La visualización queda así:

introducir la descripción de la imagen aquí

2
  • ¿Quieres que los elementos tengan su propio ancho o está bien si todos acaban con el mismo ancho?
    – Alvaro Montoro
    Commented el 6 abr. 2016 a las 3:45
  • Cualquiera de las dos maneras me sirve aunque para enriquecer el conocimiento me gustaría saber las 2 maneras si no es mucha molestia Commented el 6 abr. 2016 a las 4:27

2 respuestas 2

1

Puedes probar con el siguiente código, he agregado nav-justified y eliminado nav-pills:

<nav class="navbar navbar-default navbar-inverse " >
  <div class="navbar-header " id="navigation">
    <ul class="nav nav-justified">
       <li role="presentation" ><a href="index.html">INICIO</a></li>
       <li role="presentation" ><a href="pacas.html">VENTA DE ROPA EN PACAS</a></li>
       <li role="presentation" ><a href="varon.html">VENTA DE ROPA PARA VARON</a></li>
       <li role="presentation" ><a href="dama.html">VENTA DE ROPA PARA DAMA</a></li>
       <li role="presentation" ><a href="nino.html">VENTA DE ROPA PARA NIÑO</a></li>
   </ul>
 </div>
</nav>

Sólo resta ajustar los colores de tu preferencia y reducir el valor min-height de la clase
.navbar, por defecto es 50px.

Saludos!

3
  • muchisimas gracias me han servido de muchisima ayuda, como puedo modificar el min-height desde el css? seria .navbar { min-height: 30px; } realize ese codigo pero no cambia el tamaño de los li, y los colores aun no se como modificarlos podrian ayudarme en ese tema? les agradeceria muchisimo me han servido de mucho su ayuda! Commented el 6 abr. 2016 a las 6:04
  • Te recomiendo crear un segundo archivo CSS para tu código personalizado, puede llamarse custom.css o similar, debes agregarlo debajo del link de Bootstrap. Tu código es correcto. Commented el 6 abr. 2016 a las 8:07
  • Para cambiar el color de fondo y el color del texto usa las clases .nav>li>a y .nav>li>a:hover. Te será de gran utilidad una herramienta como Firebug o similar para inspeccionar el código fuente de tu página en el navegador. Commented el 6 abr. 2016 a las 8:23
1

Seguramente hay bastantes métodos para solucionar este problema. Aquí dejo un par de posibles alternativas dependiendo de si quieres que todos los elementos tenga el mismo o diferente ancho.

1) Todos los elementos con el mismo tamaño

Podrías hacer uso de nav-justified que hace que todos los elementos del nav ocupen el mismo ancho en el padre (y en ventanas/pantallas de menos de 768 pixels los muestra en vertical unos encima de otros).

Nota: como se indica en el propio enlace de arriba, nav-justified no está soportado del todo y presenta bugs en Safari.

He aprovechado para limpiar un poco las clases innecesarias. Con esos cambios el código sería así:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">

<nav class="navbar navbar-default navbar-inverse " >
  <div class="navbar-header " id="navigation">
    <ul class="nav nav-pills nav-justified">
       <li role="presentation" class="active"><a href="index.html"><h4> INICIO</h4></a></li>
       <li role="presentation" class="active"><a href="pacas.html"><h4> VENTA DE ROPA EN PACAS</h4></a></li>
       <li role="presentation" class="active"><a href="varon.html"><h4> VENTA DE ROPA PARA VARON</h4></a></li>
       <li role="presentation" class="active"><a href="dama.html"><h4> VENTA DE ROPA PARA DAMA</h4></a></li>
       <li role="presentation" class="active"><a href="nino.html"><h4>VENTA DE ROPA PARA NIÑO</h4></a></li>
   </ul>
 </div>
</nav>


2) Elementos con distinto tamaño

En este caso lo que haríamos es hacer que el ul tenga un display:table, y los li un display:table-cell. Así se comportarán como si fueran las celdas de una tabla y el navegador las distribuirá como pueda para ajustarse al ancho de la pantalla.

El código quedaría así:

ul.nav { display:table; width:100%; }
ul.nav > li { display:table-cell; float:none; }
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">

<nav class="navbar navbar-default navbar-inverse " >
  <div id="navigation">
    <ul class="nav nav-pills">
       <li role="presentation" class="active"><a href="index.html"><h4> INICIO</h4></a></li>
       <li role="presentation" class="active"><a href="pacas.html"><h4> VENTA DE ROPA EN PACAS</h4></a></li>
       <li role="presentation" class="active"><a href="varon.html"><h4> VENTA DE ROPA PARA VARON</h4></a></li>
       <li role="presentation" class="active"><a href="dama.html"><h4> VENTA DE ROPA PARA DAMA</h4></a></li>
       <li role="presentation" class="active"><a href="nino.html"><h4>VENTA DE ROPA PARA NIÑO</h4></a></li>
   </ul>
 </div>
</nav>

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.