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>

nav-tabs不使用overflow-x滚动：滚动

1 个答案: