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

Posted 2023-03-06

【中文标题】如何在小屏幕上禁用引导对齐选项卡的堆叠

【英文标题】：How to disable stacking of bootstrap justified tabs on small screens

【发布时间】：2014-03-28 17:38:21

【问题描述】：

我见过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;

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

【问题讨论】：

对我来说似乎是正确的并且在这里工作（注意我添加了更多样式以使标签看起来正确）jsbin.com/wakuf/1/edit。你确定你的 CSS 被调用了吗？

谢谢，成功了！唯一的区别是我最初没有应用 1% 的宽度，这似乎使它起作用了。

这并不总是适用于两个以上的选项卡。我尝试了 3 个导航药丸，但它们之间留下了太多空间，将第三个踢到下一行。不过，接受的答案确实有效（使用 col-xs-4）。

【参考方案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 并调整屏幕大小，看看我在说什么。

【讨论】：

在几个相关的解决方案中，这是唯一一个对我有用的。谢谢！

【参考方案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;
  

【参考方案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;
      
    
  

【参考方案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;

【参考方案5】：

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

@media (min-width: 0px) 

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

Should I avoid using !important in CSS?

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

【讨论】：

与其他解决方案相比，这非常好；其他一些解决方案会破坏标签的样式。

【参考方案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;
  

【讨论】：

我没有影响所有选项卡控件，而是使用了一个名为no-stack 的类，并将它应用到我的html 中的nav-justified 类之外。我将 @james 的 css 选择器更改为 .nav-justified.no-stack

【参考方案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;
  

【讨论】：

似乎对我有用的唯一解决方案。迄今为止最好的答案！谢谢

这似乎是一个不错的解决方案，但有一个缺点：如果你有很多 项目，你会失去响应能力，并且在一定宽度以下得到丑陋的水平滚动条。有谁知道如何解决这个问题？

我改进了它，在媒体查询的末尾添加了这条规则： .nav-justified > li.active > a border-bottom-width: 0px !important;

更好的解决方案。我希望群众可以投票作为接受的答案。

【参考方案8】：

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

CSS：

.nav li 
    display:table-cell !important;

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

这对我很有用...

【讨论】：

没关系，但在移动视图中它不会在 div 中间居中...

【参考方案9】：

尝试在链接前添加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

【讨论】：

谢谢！这似乎也有效。为什么一种解决方案会比另一种更好？

根据引导文档，这是正确的解决方案。如果您不指定布局，则默认为 col-xs-12（所有十二个网格）。这对我来说是一个更好的解决方案，因为您不必添加额外的 css 行。这个问题已经存在一个 css 类。不要重复自己（D.R.Y）。请将此问题标记为已回答。谢谢！

我不同意这是正确的答案，因为样式丢失了

将 div 作为 ul 的直接子级是无效的 html

不应将无效的 html 代码视为答案