如何在小屏幕上禁用引导对齐选项卡的堆叠

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

其他简单的解决方案是将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 的情况。继续在我的 Fiddle 上使用 row wrap 并调整屏幕大小，看看我在说什么。

Answer 2

并编辑 pjb 的答案，甚至保留引导程序对齐导航栏的默认样式。

@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 3

LESS - 引导

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

Answer 4

很大程度上取决于您是否要保持默认引导程序完好无损，只需在顶部添加您的自定义主题。很多时候这很有意义，因为如果标签列表增长到 3 或 4 等，您可能希望稍后在轨道上堆叠移动标签。我要做的是向 ul 添加一个新类“custom-未堆叠”，然后将此 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 5

如果您不想将最大宽度限制为 768px，除了 james 回答之外，您还可以这样做：

@media (min-width: 0px) {

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

}

Should I avoid using !important in CSS?

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

Answer 6

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

这是显示活动选项卡底部边框在压缩时显示的原件

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 7

其他一些解决方案的问题是标签会失去它们的边框和其他设计元素。以下媒体查询更充分地确保标签在压缩和更宽的显示中匹配：

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