Bootstrap 4 nav-tabs设置overflow-x:scroll后无法滚动的问题

我来帮你搞定这个标签过多导致容器拉伸的问题！其实核心原因是Bootstrap的.nav作为flex容器，默认会跟着子元素的总宽度拉伸，哪怕你设置了max-width:100%也没用——因为flex容器的默认行为就是“收缩或拉伸以适应内容”。下面是完美的解决方案：

关键思路 #

1. 给.nav套一个外层容器，用来限制最大宽度
2. 调整.nav的flex属性，确保它不会超出外层容器的范围
3. 启用横向滚动，同时优化移动端的滚动体验

完整代码示例 #

HTML #

<!-- 外层容器用来限制宽度 -->
<div class="tab-scroll-wrapper">
  <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">Long Tab Name Example</a>
    </li>
    <li class="nav-item px-1">
      <a class="nav-link">Tab 5</a>
    </li>
    <li class="nav-item px-1">
      <a class="nav-link">Tab 6</a>
    </li>
    <li class="nav-item px-1">
      <a class="nav-link">Tab 7</a>
    </li>
  </ul>
</div>

CSS #

/* 外层容器：占满父元素宽度，隐藏超出部分 */
.tab-scroll-wrapper {
  width: 100%;
  overflow: hidden;
}

/* 调整nav-tabs的样式 */
.nav.nav-tabs {
  flex-wrap: nowrap; /* 强制标签横向排列，不换行 */
  width: 100%; /* 限制nav的宽度等于外层容器 */
  overflow-x: auto; /* 启用横向滚动 */
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch; /* 移动端顺滑滚动 */
  padding-bottom: 2px; /* 可选：避免滚动条覆盖标签底部的边框 */
}

/* 可选：隐藏滚动条，让界面更整洁（不影响滚动功能） */
.nav.nav-tabs::-webkit-scrollbar {
  display: none;
}
.nav.nav-tabs {
  -ms-overflow-style: none;  /* IE/Edge 隐藏滚动条 */
  scrollbar-width: none;  /* Firefox 隐藏滚动条 */
}

为什么这个方案有效？ #

• 外层的.tab-scroll-wrapper固定了宽度为100%，让内部的.nav无法无限拉伸
• .nav设置width:100%后，会严格遵守外层容器的宽度限制，超出部分自动触发横向滚动
• 去掉了你原来的white-space: nowrap和.nav li { display: inline-block }——因为Bootstrap的.nav-item默认是flex子元素，flex-wrap: nowrap已经足够让标签横向排列，不需要额外设置inline-block

这样既实现了标签过多时的横向滚动，又不需要用固定px宽度，完全自适应父容器的宽度！

内容的提问来源于stack exchange，提问作者anesin1109