How to disable stacking of bootstrap justified tabs on small screens
css, navbar, twitter-bootstrap
Solution
Try adding `col-xs-6` before the links
<!-- Nav tabs -->
<ul class="nav nav-tabs nav-justified" id="myTab">
<div class="col-xs-6">
<li class="active"><a href="#ratings" data-toggle="tab">Ratings</a></li>
</div>
<div class="col-xs-6">
<li><a href="#reviews" data-toggle="tab">Reviews</a></li>
</div>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane active" id="ratings">This is a rating section</div>
<div class="tab-pane" id="reviews">This is for reviews. There should be some styling here.</div>
</div>
you can check it out here Bootply
Problem
I have seen this post, but being a new user I can't comment to ask for clarification. I'm using the justified nav tabs in Bootstrap and don't want them to stack on small screens, since I only have 2 tabs. I would like them to remain side by side, just shrink down to fit the screen. This is what I have: ``` <!-- Nav tabs --> <ul class="nav nav-tabs nav-justified" id="myTab"> <li class="active"><a href="#ratings" data-toggle="tab">Ratings</a></li> <li><a href="#reviews" data-toggle="tab">Reviews</a></li> </ul> <!-- Tab panes --> <div class="tab-content"> <div class="tab-pane active" id="ratings">This is a rating section</div> <div class="tab-pane" id="reviews">This is for reviews. There should be some styling here.</div> </div> ``` As the related post suggests using media queries, I cannot seem to make that work. I had tried setting the following to target just small screens: ``` @media (max-width: 768px) { .nav-justified > li {display: table-cell;} } ``` I'm not sure what I'm doing wrong so any help is greatly appreciated.