Question

我见过this post，但作为新用户，我无法发表评论要求澄清。

我在Bootstrap中使用了对齐的导航标签，并且不希望它们在小屏幕上堆叠，因为我只有2个标签。我希望他们能够并排，只需缩小以适应屏幕。这就是我所拥有的：

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

正如相关帖子建议使用媒体查询一样，我似乎无法做到这一点。我曾尝试将以下内容设置为仅针对小屏幕：

    @media (max-width: 768px) {
  .nav-justified > li {display: table-cell;}
}

我不确定我做错了什么，所以非常感谢任何帮助。

Answer 1

其他一些解决方案的问题是标签会丢失边框和其他设计元素。以下媒体查询更全面地确保选项卡在精简和更宽的显示中匹配：

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

Answer 2

我试图编辑@pjb答案，因为它不完整。但我的编辑被拒绝了两次，因为显然它是“不正确的”。虽然掠夺者倾向于不同意......

这是原始图片显示当压缩时显示活动标签底部边框

http://plnkr.co/edit/p62KlHnqPjAsK7XR3mLa?p=preview

这个版本显然没有显示

http://plnkr.co/edit/BBDW7nIxGh0J6a9vsuZx?p=preview

@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;
  }
  .nav-tabs.nav-justified > .active > a,
  .nav-tabs.nav-justified > .active > a:hover,
  .nav-tabs.nav-justified > .active > a:focus {
    border-bottom-color: #fff !important;
  }
}

Answer 3

有一种非常简单的方法可以防止堆叠：

CSS：

.nav li {
    display:table-cell !important;
}

我搜索了这个并且对包含自定义构建引导程序（我使用CDN）和LESS（我不使用）的答案感到恼火。

这对我很有用......

Answer 4

除了james回答，如果你不想将max-width限制为768px，你可以这样做：

@media (min-width: 0px) {

  .nav-justified > li {
    display: table-cell;
    width: 1%;
  }

}

Should I avoid using !important in CSS?

如果您希望避免在CSS中使用!important，请在引导程序包含后粘贴代码。

Answer 5

尝试在链接

之前添加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

Answer 6

其他简单的解决方案是将flex类添加到<ul>元素而不是nav-justified

.just {
  display: flex;
  flex-flow: row nowrap;
}

.just > li {
  flex: 1 auto;
  text-align: center;
  white-space: nowrap;
}

jsFiddle
请注意，如果有多个标签，其中一些可能会出现在屏幕后面。为防止这种情况发生，您可以将wrap代替nowrap添加到flex flow。这样他们确实会堆叠，但只有当事情通常会落后于屏幕时，意味着warp堆叠的断点小于nav-justified的情况。继续在我的小提琴上使用row wrap并调整屏幕大小以查看我在说什么。

Answer 7

很大程度上取决于您是否要保持默认引导程序完好无损，只需在顶部添加自定义主题即可。很多时候这是有道理的，因为如果你的选项卡列表增长到3或4等，你可能希望以后在轨道上有移动堆叠标签。我要做的是在ul＆＃34中添加一个新类;定制不堆叠＆＃34;然后将此css添加到样式表中：

.nav-justified.custom-not-stacked>li {
display: table-cell;
width: 1%;
}
.nav-justified.custom-not-stacked>.active>a, 
.nav-justified.custom-not-stacked>.active>a:focus, 
.nav-justified.custom-not-stacked>.active>a:hover {
border-bottom-color: #fff;
}
.nav-justified.custom-not-stacked>li>a {
border-bottom: 1px solid #ddd;
border-radius: 4px 4px 0 0;
margin-bottom: 0;
}

Answer 8

编辑pjb的答案，甚至保留了bootstrap对齐导航栏的默认样式。

@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;
  }
    .nav-justified > li.active > a  {
        border-bottom: 1px solid transparent !important;
  }

}

Answer 9

LESS - Bootstrap

这是@pjb转换为LESS的答案。我目前正在使用bootstrap.less，所以下面是我实现的样式。

@media (max-width: @screen-xs-max) {

  .nav-justified {

    > li {
      display: table-cell;
      width: 1%;

      > a {
        border-bottom: 1px solid @nav-tabs-justified-link-border-color !important;
        border-radius: @border-radius-base @border-radius-base 0 0 !important;
        margin-bottom: 0 !important;
      }
    }
  }
}

如何在小屏幕上禁用堆栈引导对齐标签

9 个答案: