Css 引导水平滚动选项卡栏

我正在Bootstrap3中创建一个带有选项卡栏的应用程序。我正在动态添加和删除选项卡。这一切都很好，但我想做的是，如果有太多的标签无法适应应用程序的宽度，而不是创建多行或多个标签，则标签栏可以在标签之间水平滚动

有人这样做了吗？或者有人知道如何实施吗？

下面是一个例子：

（由于某些原因，无法在代码段中工作，因此这里有一个指向Bootply的链接：

.nav选项卡{
溢出-x：自动；
溢出y：隐藏；
显示：-网络工具包盒；
显示器：-moz盒；
}
.nav选项卡>li{
浮动：无；
}

我在第一区

我在第二节

我使用导航创建了一个可水平滚动的选项卡栏

您可以查看下面代码的工作演示

CSS

HTML

HTML


CSS


JS


反应


有棱角的


Vue


独自创立


顺风


代码笔

这就是我正在寻找的功能，现在我可以把它设计得更漂亮一点，谢谢。@vee当然（-webkit），请参阅我对Firefox的更新，这正是我所需要的。谢谢我必须在移动环境中实现这一点，我使用了您的解决方案，并将其与jQuery插件结合起来，以使用箭头控制滚动。如果它对这里的任何人都有帮助，请访问存储库的链接。干杯。我相信您应该使用的语法是最新和正确的flex box语法。最安全的可能是：显示：-webkit框；显示器：-moz盒；显示：-ms flexbox；显示：-webkit flex；显示器：flex；

 .nav {
  overflow-x: auto;
  overflow-y: hidden;
  height: 115px;
}

.nav-item {
  cursor: pointer;
  margin: 15px 10px;
  width: 200px;
  height: 70px;
  box-shadow: 0 4px 6px -6px #222;
}

.nav-link {
  font-size: 14px;
  text-align: center;
}

.nav-item.selected {
  color: #fff;
  background-color: #007bff;
}

<div class="card">
  <div class="card-body">
    <ul class="nav flex-column nav-pills">
      <li class="nav-item selected">
        <span class="nav-link">HTML </span>
      </li>
      <li class="nav-item">
        <span class="nav-link">CSS</span>
      </li>
      <li class="nav-item">
        <span class="nav-link">JS</span>
      </li>
      <li class="nav-item">
        <span class="nav-link">React</span>
      </li>
      <li class="nav-item">
        <span class="nav-link">Angular</span>
      </li>
      <li class="nav-item">
        <span class="nav-link">Vue</span>
      </li>
      <li class="nav-item">
        <span class="nav-link">Bootstrap</span>
      </li>
      <li class="nav-item">
        <span class="nav-link">Tailwind</span>
      </li>
      <li class="nav-item">
        <span class="nav-link">Codepen</span>
      </li>
    </ul>
  </div>
</div>