Javascript 使用引导创建响应性选项卡（它们应该自动堆叠在较小的屏幕上）

如何创建使用引导自动堆叠的响应选项卡。 我的导航系统的代码是-

<div>
    <ul id="tabslist_navs" class="nav nav-tabs">
        <li><a href="#">Normal</a></li>
        <li><a href="#">Hover</a></li>
        <li><a href="#">Selected</a></li>
    </ul>
    <div class="tab-content">
        ....
    </div>
</div>

....

在小屏幕上查看时，我需要将它们转换为堆叠的选项卡。 现在，它只是将标签移动到多个相似的位置，看起来很难看。 我想要类似导航栏折叠的东西，但不需要按钮来激活折叠。

这应该可以：

@media (max-width: 480px) { 
    .nav-tabs > li {
        float:none;
    }
}

---

使用BootStrap版本3，通过添加4个CSS类，您可以以干净的垂直方式为超小型设备堆叠所有内容。不会像您注意到的那样渲染得很好。下面的代码可以通过删除所有背景和边框来完成这项工作

@media (max-width: 767px) { 
    .nav-tabs > li {
        float:none;
        border:1px solid #dddddd;
    }
    .nav-tabs > li.active > a{
        border:none;
    }
    .nav > li > a:hover, .nav > li > a:focus,
    .nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus
     {
        background:none;
        border:none;
    }
}

---

如果您发现480不能做到这一点（我有很长的标签标题），您可以随时更改最大宽度。我用过：

@media (max-width: 991px) { 
 .nav-tabs > li {
    float:none;
 }
}

---

而且它的工作原理很有魅力。

如果您使用的是SCS或更少的支持，您应该使用适当的媒体查询变量：

在SCSS中：

  @media (max-width: $screen-md-min) {
    .nav-tabs > li {
      float:none;
    }
  }

在以下情况下：

  @media (max-width: @screen-md-min) {
    .nav-tabs > li {
      float:none;
    }
  }

检查有关可能的VAR的详细信息

    @media (max-width: 480px) {
        .nav-tabs > li {
            float:none;
            margin-bottom: 0px;
        }
        .nav-tabs > li.active > a {
            border: 1px solid #dddddd;
        }
        .nav-tabs > li.active > a:hover {
            border: 1px solid #dddddd;
        }
        .nav-tabs > li  > a {
            border-bottom: 1px solid #dddddd;
            border-left: 1px solid #dddddd;
            border-right: 1px solid #dddddd;
        }
        .nav-tabs > li > a:hover {
            border-color: #dddddd;
        }
    }

---

这一个更简单、更美观。

在我看来，这里的其他解决方案仍有许多需要改进的地方。这是一个基于早期解决方案的解决方案，但使用CSS flexbox。标签尽可能并排放置，仅在需要时才换行，并且仍然填充屏幕宽度，水平空间均匀分布。它看起来干净、平衡，并且可以很好地缩放以处理较长的选项卡或较大数量的选项卡。它还解决了其他解决方案的一些边界和边界半径问题

SCSS：

或者，普通CSS：

@media (max-width: 767px) {
  .nav-tabs {
    display: flex;
    flex-wrap: wrap;
    padding-right: 1px;
  }
  .nav-tabs > li {
    flex: auto;
    text-align: center;
    border: 1px solid #ddd;
    margin-right: -1px;
  }
  .nav-tabs > li > a {
    margin: 0;
  }
  .nav-tabs > li.active {
    background: #eee;
  }
  .nav-tabs > li.active > a,
  .nav-tabs > li.active > a:hover,
  .nav-tabs > li.active > a:focus {
    border: none;
    background: none;
  }
}

---

谢谢！这很有效。。。但是还有其他方法吗？根据Bootstrap的文档，没有，但是如果您使用的是

Bootstrap responsive.css

，您可以将代码添加到文件中，使其更加有序（第887行）。这应该是一个注释，而不是额外的答案。但是看到你的RP，我明白你为什么这么做了。我的RP？如果可以的话，我很乐意改为发表评论。。我在这里主要学习，很高兴我能为这一次做出贡献！XDRP=声誉点数。看到人们做出贡献真是太好了！这很好。但是您应该使用

边框：1px实心透明

来防止链接在鼠标上抖动，因为边框正在被删除和添加。略微改进：

@media（最大宽度：768px）{.nav tabs>li{float:none；border:1px实心#ddddddddd；}.nav tabs>li.active{背景：#eeeeeeee；}.nav tabs>li.active>a{边框：1px实心透明；}.nav>li>a:hover、.nav>li>a:focus、.nav tabs>li.active>a.nav tabs>li.active>a:hover、.nav tabs>li.active>a:focus{背景：无；边框：1px实心透明；}

@media (max-width: 767px) {
  .nav-tabs {
    display: flex;
    flex-wrap: wrap;
    padding-right: 1px;
  }
  .nav-tabs > li {
    flex: auto;
    text-align: center;
    border: 1px solid #ddd;
    margin-right: -1px;
  }
  .nav-tabs > li > a {
    margin: 0;
  }
  .nav-tabs > li.active {
    background: #eee;
  }
  .nav-tabs > li.active > a,
  .nav-tabs > li.active > a:hover,
  .nav-tabs > li.active > a:focus {
    border: none;
    background: none;
  }
}