nav-pills stretching full width, does not work using % - html

Question

I am developing a small app and have now to deal with the front end part of it. I am using bootstrap for it. For the navbar part, I am using nav-pills navbar, and I want it stretched to 100%. My navbar code:
<div class="navbar navbar-static-top" >
<div class="navbar-inner">
<ul class="nav nav-pills" >
<li >Home</li>
<li>Some</li>
<li>Items</li>
<li>Here</li>
<li>Register</li>
<li>Login</li>
</ul>
</div>
</div>
Now the css part:
.nav-pills{
margin-top:20px;
width:100%;
}
.nav-pills > li {
float: left;
}
Now if i change the 100% in nav-pills to say 1366px, it works. But when I scale it to 100%, the navbar is not stretched. I tried giving the width of .nav-pills > li to 25%, trying with just 4 tabs. That also gives the perfect result. But since the number of tabs vary from page to page, I don't want to fix the size of the .nav-pills > li class. I want to stretch the navbar to full width. What is that I should do?

Answer 1

Bootstrap 3 has a nav-justified class that does exactly what you want (at screens wider than 768px, on smaller screens the nav links are stacked).
Just add it to your .nav like this:
<ul class="nav nav-pills nav-justified">
<li >Home</li>
<li>Some</li>
<li>Items</li>
<li>Here</li>
<li>Register</li>
<li>Login</li>
</ul>
Demo fiddle

Answer 2

nav-pills nav-justified items not width fixed.
For this case:
HTML
<div class="gridProducts_box">
<ul class="nav nav-pill">
<li class="gridProducts_box__items">
One
</li>
<li class="gridProducts_box__items">
Two
</li>
<li class="gridProducts_box__items">
Three
</li>
<li class="gridProducts_box__items">
Four
</li>
<li class="gridProducts_box__items">
Five
</li>
</ul>
</div>
CSS
/* nav tabs fixed wodth */
.gridProducts_box > ul.nav.nav-pills {
display: table;
width: 100%;
table-layout: fixed;
}
.gridProducts_box > ul.nav.nav-pills > li {
float: none;
display: table-cell;
}
.gridProducts_box > ul.nav.nav-pills > li > a {
text-align: center;
}
.gridProducts_box__items {
width: 100%;
}
Demo