导航标签不使用溢出-x 滚动：滚动

Question

我尝试nav-tabs从 Bootstrap 4开始使用，当它有太多项目时，我想让它可以滚动。

首先，默认行为是将项目移动到下一行。我用white-space: nowrap和解决了这个问题flex-wrap: nowrap。

我意识到即使有一个禁用的滚动条，容器也在沿 x 轴扩展。我试图用 Give 修复它max-width: 100%，但它不起作用。我发现使用特定的 px 值可以使它工作，但这对我来说不是一个好的解决方案。

HTML：

<ul class="nav nav-tabs">
  <li class="nav-item px-1">
    <a class="nav-link active">Active Tab</a>
  </li>
  <li class="nav-item px-1">
    <a class="nav-link">Tab</a>
  </li>
  <li class="nav-item px-1">
    <a class="nav-link">Tab</a>
  </li>
</ul>

CSS：

.nav {
  white-space: nowrap;
  flex-wrap: nowrap;
  max-width: 100%;
  overflow-x: scroll;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch
}

.nav li {
  display: inline-block
}

Answer 1

使用display:block!important;来.nav 代替 display:flex

.nav {
  white-space: nowrap;
  display:block!important;
  flex-wrap: nowrap;
  max-width: 100%;
  overflow-x: scroll;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch
}

.nav li {
  display: inline-block
}

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<ul class="nav nav-tabs">
  <li class="nav-item px-1">
    <a class="nav-link active">Active Tab</a>
  </li>
  <li class="nav-item px-1">
    <a class="nav-link">Tab</a>
  </li>
  <li class="nav-item px-1">
    <a class="nav-link">Tab</a>
  </li>
    <li class="nav-item px-1">
    <a class="nav-link active">Active Tab</a>
  </li>
  <li class="nav-item px-1">
    <a class="nav-link">Tab</a>
  </li>
  <li class="nav-item px-1">
    <a class="nav-link">Tab</a>
  </li>
    <li class="nav-item px-1">
    <a class="nav-link active">Active Tab</a>
  </li>
  <li class="nav-item px-1">
    <a class="nav-link">Tab</a>
  </li>
  <li class="nav-item px-1">
    <a class="nav-link">Tab</a>
  </li>
</ul>