Bootstrap 水平滚动标签栏答案

【问题标题】：Bootstrap horizontal scrollable tab barBootstrap 水平滚动标签栏
【发布时间】：2022-03-13 05:37:10
【问题描述】：

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

有没有人做过这个或者知道如何实现这个？

【问题讨论】：

标签： css twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

这是一个例子：

（由于某种原因无法在 sn-p 中工作，所以这里是 Bootply 的链接：http://www.bootply.com/oROUAMwsG1）

.nav-tabs {
  overflow-x: auto;
  overflow-y: hidden;
  display: -webkit-box;
  display: -moz-box;
}
.nav-tabs>li {
  float: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="col-md-4">
    <div class="tabbable">
      <ul class="nav nav-tabs">
        <li class="active"><a href="#tab1" data-toggle="tab">Section 1</a>
        </li>
        <li><a href="#tab2" data-toggle="tab">Section 2</a>
        </li>
        <li><a href="#tab2" data-toggle="tab">Section 3</a>
        </li>
        <li><a href="#tab2" data-toggle="tab">Section 4</a>
        </li>
        <li><a href="#tab2" data-toggle="tab">Section 5</a>
        </li>
        <li><a href="#tab2" data-toggle="tab">Section 6</a>
        </li>
        <li><a href="#tab2" data-toggle="tab">Section 7</a>
        </li>
      </ul>
      <div class="tab-content">
        <div class="tab-pane active" id="tab1">
          <p>I'm in Section 1.</p>
        </div>
        <div class="tab-pane" id="tab2">
          <p>I'm in Section 2.</p>
        </div>
      </div>
    </div>
  </div>
</div>

【讨论】：

这就是我正在寻找的功能，现在我可以让它看起来更好一点，谢谢。
@vee 当然 (-webkit) ，请参阅我的 firefox 更新
正是我所需要的。谢谢！
我不得不在移动环境中这样做，并且我使用了您的解决方案并将其与 jQuery 插件一起使用箭头来控制滚动。如果它对这里的任何人有帮助，这里是存储库 github.com/LucasLazaro/bootstrap-nav-tab-scrollable 的链接。干杯。
当标签很好地适合页面并且不需要滚动时，是否有修复现在添加的底部边框？删除溢出属性时，它会被删除。

【解决方案2】：

我解决了这个问题：

.nav.nav-tabs {
  overflow-x: auto;
  overflow-y: hidden;
  flex-wrap: nowrap;
}

示例：https://codepen.io/r3l4x/pen/mdpdMLQ

注意跨浏览器的东西，所以可能不是一个好的答案。

【讨论】：

【解决方案3】：

我使用导航创建了一个可水平滚动的标签栏。

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

CSS

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

HTML

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

【讨论】：

【解决方案4】：

.nav-tabs {
    overflow-x: auto;
    overflow-y: hidden;
    display: -webkit-box;
    display: -moz-box;
  }
  .nav-tabs>li {
    float: none;
  }

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <link rel="stylesheet" href="teste.css">
   <title>Document</title>
</head>
<body>
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
   <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>

   <div class="container">
   <div class="col-md-4">
      <div class="tabbable">
         <ul class="nav nav-tabs">
            <li class="active"><a href="#tab1" data-toggle="tab">Section 1</a></li>
            <li><a href="#tab2" data-toggle="tab">Section 2</a></li>
            <li><a href="#tab3" data-toggle="tab">Section 3</a></li>
            <li><a href="#tab4" data-toggle="tab">Section 4</a></li>
            <li><a href="#tab5" data-toggle="tab">Section 5</a></li>
         </ul>
         <div class="tab-content">
            <div class="tab-pane active" id="tab1">
               <p>I'm in Section 1.</p>
            </div>
            <div class="tab-pane" id="tab2">
               <p>I'm in Section 2.</p>
            </div>
            <div class="tab-pane" id="tab3">
               <p>I'm in Section 3.</p>
            </div>
            <div class="tab-pane" id="tab4">
               <p>I'm in Section 4.</p>
            </div>
            <div class="tab-pane" id="tab5">
               <p>I'm in Section 5.</p>
            </div>
         </div>
      </div>
   </div>
   </div>
</body>
</html>

【讨论】：

也为您的答案提供一些解释