必须给导航条外层新增容器并设overflow-x: auto，因.modal-dialog的flex布局会截断水平滚动；需配合white-space: nowrap、-webkit-overflow-scrolling: touch及子项inline-block或flex-shrink: 0。
Modal里放的导航条怎么在手机上左右滑动
直接给.modal-body加overflow-x: auto没用，因为 Bootstrap 的.modal-dialog是display: flex，会截断子元素的水平滚动上下文。真正要滚动的容器必须脱离这个 flex 流，且宽度要超出父级。
- 把可滑动内容（比如
.nav或.list-group）包进一个新容器，例如<div class="scrollable-nav"></div> - 给这个新容器设
overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch; - 确保内部子项（如
.nav-link）设display: inline-block或flex-shrink: 0，防止换行 - 别在
.modal-body上直接设overflow-x——它默认是块级流，不支持内联子项的水平溢出
为什么加了overflow-x: auto还是不能拖
iOS Safari 和部分 Android WebView 对overflow-x支持弱，尤其在 flex 或 transform 环境下容易失效。这不是 CSS 写错了，而是渲染引擎限制。
-
-webkit-overflow-scrolling: touch必须加在**实际发生滚动的元素上**，也就是那个scrollable-nav容器，不是.modal或.modal-body - 如果用了
transform（比如modal-dialog-centered），某些旧版 WebKit 会禁用原生水平滚动，得换成top: 50%; left: 50%; transform: translate(-50%, -50%)这类更底层的居中方式 - 检查是否意外触发了
touch-action: pan-y（常见于轮播、地图组件），它会阻止水平拖拽，临时加touch-action: pan-x试试
用 iScroll 实现稳定水平滑动
当原生overflow-x反复失效，尤其是需要惯性、回弹、或监听拖拽事件时，iScroll 是更可控的选择，但它必须正确初始化。
- 目标容器不能是
.nav本身，而应是它的**父级 wrapper**（比如<div class="tabs-parent"><ul class="nav"></ul></div>） - 初始化代码要等 DOM 渲染完成，别在
$(document).ready()里就调：new IScroll('.tabs-parent', { scrollX: true, scrollY: false, preventDefault: false }); - 务必设
scrollX: true且scrollY: false，否则默认只响应垂直手势 - 如果 Modal 是动态插入（React/Vue 渲染后 show），要在
shown.bs.modal事件里再初始化 iScroll，否则容器宽度算不准
移动端缩放或横竖屏切换后滑动错位
这不是 bug，是视口尺寸重计算滞后导致 iScroll 或 CSS 滚动容器宽度未及时更新。强行 JS 重设 width 容易抖动，得靠更稳的触发时机。
- 监听
resize不如监听orientationchange（iOS）和visualViewport变化（Chrome） - 对 iScroll 实例，在
shown.bs.modal和resize后调用myScroll.refresh()，而不是重建实例 - 避免用
vw单位控制滚动容器宽度——它在缩放时不稳定，改用max-width: 100%+min-width兜底 - 真正在意兼容性的话，把
scrollable-nav的高度也显式设为fit-content或auto，防止 flex 布局塌陷导致宽度计算失准
.modal-dialog的 flex 行为压制、是否被 transform 层级干扰、以及是否在 iOS 上漏掉了-webkit-overflow-scrolling: touch——这三个点任何一个没对齐，滑动就会静默失败。
