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>

U

Do you have a screenshot – Indite

@JamesMohler I am new to stackoverflow and do not yet have the privilege to upload photos, however screenshot might not be necessary. getbootstrap.com/components/#nav-tabs you'll read that the nav links are stacked for smaller devices. – U

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.

Liszt

Thanks, I was able to get it with the media query.nav-justified > li {display: table-cell;} @Gokhan – U

you"re welcome. Please accept my answer so that anyone looking for a solution to similar problem can see this – Liszt

This doesn't fix it; it actually doesn't change the behavior at all. – Heptachord

Answer 2

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

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

Ratal

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.

Heptachord