How to disable stacking of bootstrap justified tabs on small screens

Question

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.

Answer 1

The problem with some of the other solutions is that the tabs will lose their borders and other design elements. The following media queries more fully ensure the tabs match in both condensed and wider displays:

@media (max-width: 768px) {   .nav-justified > li {     display: table-cell;     width: 1%;   }   .nav-justified > li > a  {     border-bottom: 1px solid #ddd !important;     border-radius: 4px 4px 0 0 !important;     margin-bottom: 0 !important;   } }