直接给.nav加overflow-x:auto无效，因子项默认换行或撑宽父容器；需同时满足容器宽度受限、子项flex-wrap:nowrap、总宽超限三条件。
直接给 .nav 容器加 overflow-x: auto 通常没用——因为子项默认会换行或撑开父容器，滚动根本不会触发。必须同时满足三个条件：容器宽度受限、子项强制不换行、子项总宽度超限。
为什么原生 Bootstrap 导航条水平滑动失效
Bootstrap 的 .nav 默认是 flex 布局，但未设 flex-wrap: nowrap，小屏下会自动折行；父容器（如 #sidebar .nav）又没固定宽度或 overflow-x: auto，导致内容溢出却无滚动条。
-
.nav本身不带溢出控制逻辑，overflow必须作用在它的直接父容器上 - 移动端 viewport 宽度变化时，若未用媒体查询重置布局，
flex-direction仍为 column 或 wrap 状态 - 使用
.nav-justified或.justify-content-center会干扰 flex 项目的收缩行为，加剧撑宽
用 CSS 实现纯前端水平滚动（无需插件）
核心是让导航容器变成“固定宽度 + 强制单行 + 横向可滚”，且兼容 Bootstrap 5 的响应式断点。
- 给
.nav的直接父容器加overflow-x: auto和-webkit-overflow-scrolling: touch - 对
.nav自身设display: flex、flex-wrap: nowrap、gap: 0.5rem - 每个
.nav-item设flex: 0 0 auto，防止被 flex 均分压缩 - 在小屏下用媒体查询强制启用：
@media (max-width: 767px) { .nav-container { overflow-x: auto; } }
示例结构：
<div class="nav-container">
<ul class="nav">
<li class="nav-item"><a class="nav-link" href="#">首页</a></li>
<li class="nav-item"><a class="nav-link" href="#">产品</a></li>
<li class="nav-item"><a class="nav-link" href="#">关于</a></li>
</ul>
</div>
用 iScroll 实现更可控的水平滑动
当原生滚动卡顿、无法监听拖拽事件，或需支持惯性、回弹、禁止垂直滚动时，iScroll 是更稳的选择。
- 必须确保父容器有明确宽度（如
width: 100%）和overflow: hidden - 初始化前要先计算所有
.nav-item的innerWidth()总和，再赋给.nav宽度 - 关键配置：
{ scrollX: true, scrollY: false, preventDefault: false }，否则 touch 事件会被拦截 - 别在
$(document).ready()里直接初始化——等 DOM 渲染完成、字体加载后调用，否则宽度计算不准
常见错误：new IScroll('.nav') 写错了目标容器，实际应是包裹 .nav 的那个 div（比如 .tabs_parent）。
Bootstrap 5 中 .table-responsive 类不能复用
有人试图套用 .table-responsive 到导航上，这是无效的。该类专为 <table> 设计，内部样式（如 padding 修正、display: block）会破坏 .nav 的 flex 行为。
-
.table-responsive对.nav不起作用，CSS 类不可跨组件混用 - 若强行加，
.nav可能变块级、失去间距、点击区域错位 - 真正需要的是语义匹配的容器类，比如自定义
.nav-responsive并只应用必要样式
最易被忽略的一点：滚动容器的左右 padding 会影响可用宽度，尤其在 iOS Safari 下，-webkit-overflow-scrolling: touch 若缺失，滑动会卡顿甚至失效。别只写 overflow-x: auto 就完事。
