Modal内容区域用Bootstrap栅格需在modal-body内套row和col类，modal-dialog不参与栅格计算；其max-width限制会导致col-lg-6错乱，建议用modal-xl或增大max-width；两列高度不齐可加align-items-start；移动端需设modal-body的max-height和overflow-y。
Modal内容区域如何用Bootstrap栅格系统控制列数
直接在 modal-body 里套 bootstrap 的 row 和 col- 类就行，不用改 modal 结构本身。modal 容器本身不参与栅格计算，真正起作用的是你放进 modal-body 里的布局容器。
-
modal-body是个普通div，可以自由加row、col-lg-6这类类名 - 大屏两列：用
col-lg-6（≥992px 时占一半宽度） - 小屏一列：默认
col或col-12（移动端自动堆叠） - 别给
modal-dialog或modal-content加栅格类，它们不是栅格容器
为什么 modal-dialog 设置 max-width 后列宽会错乱
因为 modal-dialog 默认有 max-width: 500px（中屏以上），而 col-lg-6 是按父容器宽度算的——如果父容器被限制太窄，两列就会挤成一列甚至换行错位。
- 检查是否手动设置了
modal-dialog的max-width或width - 解决办法：给
modal-dialog加max-width: 800px（或更大）配合col-lg-6才能稳定出两列 - 更稳妥的做法：用
modal-xl类（Bootstrap 4.3+），它自带max-width: 1140px，适合放两列内容
两列内容高度不一致时怎么对齐顶部
默认 row 里的 col 是 flex-start 对齐，但有时因内容高度差异，视觉上像“错位”。这不是 bug，是 flex 布局默认行为。
- 加
align-items-start到row上（Bootstrap 4.4+ 支持） - 或者显式给每列加
align-self-start - 避免用
float或display: inline-block，会破坏栅格响应逻辑 - 如果用了卡片（
card），确保卡片内部没额外 margin/padding 导致高度偏差
移动端点击后模态框内容被遮挡或滚动异常
常见于两列布局在小屏强制堆叠时，Modal 高度超出视口，且 modal-body 没设 max-height 或 overflow-y。
- 给
modal-body加max-height: 70vh和overflow-y: auto - 不要只依赖
col-12，要配合flex-column或清除浮动（如加clearfix）防止塌陷 - 测试真机：iOS Safari 对
position: fixed+overflow组合支持较弱，必要时加-webkit-overflow-scrolling: touch
modal('handleUpdate') 主动触发重定位。 
