Modal内横向滑动失效的根本原因是.modal-dialog的flex布局截断了子级水平滚动上下文；必须在.modal-body内新增脱离flex的包裹容器（如.scrollable-wrapper），并设overflow-x:auto、white-space:nowrap及-webkit-overflow-scrolling:touch，子项需设display:inline-block或flex-shrink:0。
Modal 内容默认不支持横向手势滑动，因为 .modal-dialog 是 display: flex 布局，会截断子元素的水平滚动上下文；直接给 .modal-body 加 overflow-x: auto 无效。
为什么 modal-body 加 overflow-x: auto 没用
根本原因在于 .modal-dialog 的 flex 布局会“吞噬”子级的水平溢出行为——浏览器不会为被 flex 容器包裹的元素创建独立的水平滚动上下文。即使 .modal-body 设了 overflow-x: auto，它的宽度仍被父级 flex 项约束，无法自然撑开并触发滚动。
-
.modal和.modal-content是布局容器，加overflow会破坏垂直居中和响应式缩放逻辑 -
.modal-dialog默认没有min-width或width限制，但它是 flex 主轴方向（row）的容器，内部子项（如.modal-content）会被拉伸或压缩，导致可滚动区域无法形成 - 移动端 Safari/Chrome WebView 对嵌套在 flex 中的
overflow-x支持极弱，即使样式写对，也可能静默失效
必须用 wrapper 脱离 flex 上下文
真正能滚动的容器必须脱离 .modal-dialog 的 flex 流，且自身宽度要超出父级。最可靠的做法是：在 .modal-body 内新增一层包裹容器，专用于承载可滑动内容（如导航条、标签页、图片列表等）。
- 把可滑动内容（例如
<ul class="nav">）包进一个新<div class="scrollable-wrapper"> - 给这个
.scrollable-wrapper设：overflow-x: auto、white-space: nowrap、-webkit-overflow-scrolling: touch - 确保其子项（如
.nav-link）设display: inline-block或flex-shrink: 0，防止换行或压缩 - 不要给
.modal-body设display: flex或flex-direction: column后忘记给子容器设flex: 1，否则高度塌陷会导致横向滚动区域不可见
iScroll 是更稳的选择（尤其需惯性/回弹）
当原生 overflow-x 在 iOS Safari 或某些 Android WebView 中反复失效（划一下就停、松手回弹、无拖拽反馈），iScroll 是实际项目中最可控的替代方案。
- 初始化必须等 DOM 渲染完成，且 Modal 已显示：监听
shown.bs.modal事件再 new IScroll - 目标容器必须是那个
.scrollable-wrapper，不是.modal-body或.modal - 必需参数：
{ scrollX: true, scrollY: false, preventDefault: false }；漏掉preventDefault: false会导致点击失效 - 如果 Modal 是 React/Vue 动态渲染，首次 show 时容器 width 可能为 0，需调用
myScroll.refresh()手动重算尺寸
容易被忽略的兼容细节
滑动功能看似简单，但失效往往卡在某个不起眼的 CSS 层级或 JS 初始化时机上。
-
-webkit-overflow-scrolling: touch必须加在真正滚动的元素上（即.scrollable-wrapper），加在.modal-body或外层无效 - 若 Modal 使用了
.modal-dialog-centered，它底层用了transform，旧版 WebKit 会禁用原生水平滚动；可改用top: 50%; left: 50%; transform: translate(-50%, -50%)替代 - 检查是否意外设置了
touch-action: pan-y（常见于轮播、地图组件），它会阻止水平拖拽；临时加touch-action: pan-x测试 - 别在
.scrollable-wrapper上用will-change: transform，它可能干扰滚动合成层，优先用will-change: scroll-position
