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

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 ><a href="/">Home</a></li>
                    <li><a href="#">Some</a></li>
                    <li><a href="#">Items</a></li>
                    <li><a href="#">Here</a></li>

                    <li><a href="#">Register</a></li>
                    <li><a href="#">Login</a></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 ><a href="/">Home</a></li>
    <li><a href="#">Some</a></li>
    <li><a href="#">Items</a></li>
    <li><a href="#">Here</a></li>
    <li><a href="#">Register</a></li>
    <li><a href="#">Login</a></li>
</ul>

Demo fiddle