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

css, html, twitter-bootstrap

Solution

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

Problem

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?

Original source