容器需设 white-space: nowrap、overflow-x: auto、明确宽度，.nav-link 加 flex-shrink: 0 并移除 text-truncate；小屏应退化为垂直布局，结构须保持 data-bs-toggle 在 .nav 直系子元素上。
给容器加 white-space: nowrap 和 overflow-x: auto
滑动导航栏失效，八成是没拦住换行。Bootstrap 的 .nav-tabs 默认用 flex 布局，子项超出就换行或溢出隐藏——这不是滚动，是丢内容。必须让所有导航项强行排在一行：white-space: nowrap 作用于容器（比如包裹 .nav 的 div），再配 overflow-x: auto 和 overflow-y: hidden，才能触发水平滚动。
关键约束有三个：
- 容器必须有明确宽度（
width: 100%或具体像素值），否则overflow不生效 - 避免父级设
display: flex且未重置flex-wrap，否则仍可能换行 - 移动端务必加
-webkit-overflow-scrolling: touch，不然 iOS Safari 滑动手感卡顿、回弹迟钝
确保 .nav-link 不被 flex 压缩
默认情况下，.nav-link 在 flex 容器里有 flex-shrink: 1，一滚动就缩成“…”或热区变小，点不中。必须显式覆盖：
- 给
.nav-link加flex-shrink: 0 - 删掉任何
text-truncate类——滑动场景下文字本就不该截断 - 别用
min-width强控单个链接宽度，它会破坏整体等分布局；优先靠flex: 0 0 auto保持自然尺寸
如果用了 will-change: scroll-position 优化滚动性能，建议只加在滚动容器上，而非每个 .nav-link —— 过度使用反而触发频繁重绘。
立即学习“前端免费学习笔记（深入）”；
小屏下退化为垂直堆叠，别只改 overflow
在 max-width: 576px（Bootstrap sm 断点）下，强行保留横向滚动反而是交互灾难。不能只把 overflow-x 改成 visible 就完事——布局逻辑必须切换：
- 移除
white-space: nowrap - 让容器恢复默认的 flex 行为，或直接用
flex-column工具类（如class="d-flex flex-column"） - 别用
display: block强制堆叠，这会破坏.nav内置的间距和语义结构 - 若用 JS 动态控制显示/隐藏，注意 media query 切换时要同步清理内联样式，否则 CSS 规则会被覆盖
兼容 data-bs-toggle="tab" 时别动 DOM 结构
Bootstrap 5.3+ 的标签页切换依赖事件委托，只监听 .nav 直接子元素上的 data-bs-toggle。常见翻车点：
- 在
.nav-link外层额外套一层div，导致属性不在直系子元素上 → 切换失效 - 给
.nav-link设了pointer-events: none（哪怕是为了加遮罩效果）→ 点击完全无响应 - 滚动容器加了
contain: layout→ 干扰 Bootstrap 对尺寸的计算，tab 高亮错位或不更新
真正难调的不是滚动本身，而是滚动容器与 tab 切换行为之间的隐式耦合：一旦样式或结构轻微偏移，视觉反馈和功能就不同步。每次改完记得在真机上连点三次再滑动验证。
