问题
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></li>
<li></li>
<li></li>
</ul>
回答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.
回答2:
You have to add width:1% to make it stretch
.nav-justified > li {
display: table-cell;
width: 1%
}
回答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.
Add the class
navbar-default
to thenav
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).Add the classes
navbar-collapse collapse
to the inner div which contains the links that should collapse.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.
来源:https://stackoverflow.com/questions/20456353/how-to-disable-bootstrap-nav-justified-collapse-for-smaller-devices