user2654108 user2654108 - 4 months ago 69
CSS Question

How to disable stacking of bootstrap justified tabs on small screens

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

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