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>