Sort the elements of a navbar

Question

Sort the elements of a navbar

Navigation

#1 by (1 votes)
#2 by (1 votes)

1

How can I place the elements of a navbar as they are placed correctly and that the last element is at the end of navbar ? There is a gap between the last element and the end of navbar and it does not look very good.

This is my code (click on "Full page" to see the 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>

The visualization looks like this:

css3 css bootstrap

asked by Alejandro Ruiz 06.04.2016 в 04:40

source

2 answers

How to return to the previous uinavigationcontroller Recover fix in javascript and send it to php

score 1 · Answer 1

You can try the following code, add nav-justified and remove 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>

It only remains to adjust the colors of your preference and reduce the value min-height of the class
.navbar , by default it is 50px.

Greetings!

score 1 · Answer 2

Surely there are enough methods to solve this problem. Here I leave a couple of possible alternatives depending on whether you want all the elements to have the same or different width.

1) All elements with the same size

You could use nav-justified which makes all the elements of the nav occupy the same width in the father (and in windows / screens of less than 768 pixels he shows them vertically on top of each other).

Note: as indicated in the link above, nav-justified is not supported at all and has bugs in Safari.

I took the opportunity to clean up the unnecessary classes a little. With those changes, the code would be like this:

<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) Elements with different sizes

In this case what we would do is make the ul have a display:table , and the li a display:table-cell . This will behave as if they were the cells of a table and the browser will distribute them as it can to adjust to the width of the screen.

The code would look like this:

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>