如何在小屏幕上禁用堆栈引导对齐选项卡 [英] 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.

我在Bootstrap中使用了对齐的nav标签，不希望它们堆叠小屏幕，因为我只有2个标签。我希望他们保持并排，只是缩小到适合屏幕。这是我的：

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;}
}

推荐答案

尝试添加 col-xs-6

    <!-- 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>

您可以在这里查看 Bootply

这篇关于如何在小屏幕上禁用堆栈引导对齐选项卡的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！