html - nav-tabs 不滚动 overflow-x : scroll

Question

我尝试使用 Bootstrap 4 中的 nav-tabs，当它有太多元素时，我想让它可以滚动。

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

而且我意识到即使有一个禁用的滚动条，容器也会沿 x 轴扩展。我试图通过提供 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>