How to disable bootstrap nav-justified collapse for smaller devices

Question

I am using bootstrap to justify a bunch of tabs to evenly fit the width of the parent element. This is important to me. However Bootstrap automatically collapses these for smaller devices, giving them 100% width, which I don't want.

How can I disable this function?

Simple Code:

<ul class="nav nav-tabs nav-justified">
    <li>Link</li>
    <li>Link</li>
    <li>Link</li>
</ul>

Answer 1

You can add a container with class col-xs-12 thus it will be stacked on very small displays. After all if you want it to be non-stacked in all displays just write a media query.

Look there for media queries: http://getbootstrap.com/css/#grid

If you share more code then I can be more specific on answer.

Answer 2

You have to add width:1% to make it stretch

.nav-justified > li {
    display: table-cell; 
    width: 1%
}

Answer 3

These answers aren't correct. Bootstrap has a built-in simple way to do this, the same way it handles the collapse for the top menu.

1. Add the class navbar-default to the nav element. It will collapse without this class, but you won't have the little expand icon (the three horizontal lines that you click to expand).

2. Add the classes navbar-collapse collapse to the inner div which contains the links that should collapse.

3. Add <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#" aria-expanded="false" aria-controls="navbar"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> before your div that should collapse.

This will come out rather messy trying to cut and paste my 3 steps above; what I did was literally copy and paste those sections from my working navbar at the top, then paste them in one by one. Those 3 elements are what you need, though: navbar-default, navbar-collapse, and the button.