Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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?

like image 879
Aswin Murugesh Avatar asked Jul 10 '14 20:07

Aswin Murugesh


People also ask

How do I make my nav tab active?

You can activate a tab or pill navigation without writing any JavaScript by simply specifying data-toggle="tab" or data-toggle="pill" on an element. Adding the nav and nav-tabs classes to the tab ul will apply the Bootstrap tab styling, while adding the nav and nav-pills classes will apply pill styling.

What is Bootstrap pill?

Bootstrap tabs separate data in the same wrappers but different panes. Pills are components placed in pages to speed up browsing. Also, the first step of adding links inside navbar is to apply <ul> element together with class="navbar-nav".

What is NAV item in Bootstrap?

Navigation available in Bootstrap share general markup and styles, from the base . nav class to the active and disabled states. Swap modifier classes to switch between each style. The base . nav component is built with flexbox and provide a strong foundation for building all types of navigation components.


1 Answers

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

like image 150
omma2289 Avatar answered Sep 22 '22 08:09

omma2289