Modal中overflow-x: auto失效是因为.modal-dialog的flex布局截断滚动上下文；需用独立wrapper设overflow-x: auto、white-space: nowrap等，并注意移动端touch-action和transform兼容性。
Modal里直接加overflow-x: auto为什么滑不动
因为 Bootstrap 的 .modal-dialog 默认是 display: flex，它会截断子元素的水平滚动上下文。即使你给 .modal-body 或 .modal-content 加了 overflow-x: auto，浏览器也不会触发水平滚动——父级 flex 容器没给子元素“溢出空间”的渲染权限。
真正要滚动的容器必须脱离.modal-dialog的flex流
原生手势左右滑动依赖的是底层滚动机制，不是 JS 拖拽模拟。必须让可滑动内容处于一个独立、宽度超限、且未被 flex 布局压制的容器中：
- 把要滑动的内容（比如
.nav、.list-group或自定义 tab 区）用新<div>包一层，例如<div class="horizontal-scroll-wrapper"> - 给这个 wrapper 加：
overflow-x: auto、white-space: nowrap、-webkit-overflow-scrolling: touch - 确保内部子项不换行：设
display: inline-block或flex-shrink: 0，别用flex: 1把它们压扁 - 别在
.modal-body上直接设overflow-x，它默认是块级流，无法承载内联子项的水平溢出
iOS Safari 和部分 Android WebView 需要额外防干扰
原生 overflow-x 在移动端容易失效，不是 CSS 写错了，而是渲染引擎限制：
-
-webkit-overflow-scrolling: touch必须加在真正滚动的 wrapper 上，不是.modal或.modal-body - 检查是否意外设置了
touch-action: pan-y（常见于轮播、地图组件），它会禁用水平拖拽；临时加touch-action: pan-x测试 - 如果
.modal-dialog用了transform: translate()居中（如modal-dialog-centered），旧版 WebKit 可能直接禁用水平滚动，换成top: 50%; left: 50%; transform: translate(-50%, -50%)更稳妥 - 避免在 wrapper 内部用
display: flex; flex-direction: column却没给子容器设flex: 1，否则高度塌陷会导致水平滚动区域不可见
当原生滚动反复失败时，用iScroll接管更可控
原生 overflow-x 在复杂 Modal 场景下容错率低，尤其涉及动态渲染、横竖屏切换或需要惯性回弹时：
- 目标容器必须是 wrapper（比如
.horizontal-scroll-wrapper），不能是.nav本身 - 初始化要等 DOM 渲染完成：若 Modal 是 Vue/React 动态插入，必须在
shown.bs.modal事件里调用new IScroll('.horizontal-scroll-wrapper', { scrollX: true, scrollY: false }) - 务必显式关闭垂直滚动：
scrollY: false，否则默认只响应 vertical 手势 - 如果页面有全局
preventDefault或第三方手势库（如 Hammer.js），需在 iScroll 配置中加preventDefault: false
e.preventDefault() 或重写了 touchstart，把原生滚动事件吞掉了——这类干扰往往藏得深，得逐层排查 wrapper 的 touch-action 和事件监听链。 
