Bootstrap Modal 大屏两栏布局需用 flex 替代默认 column：给 modal-body 添加自定义类（如 modal-body-split），设 display: flex; gap: 1.5rem；两子 div 分别为 modal-main 和 modal-sidebar，小屏堆叠，大屏 flex 布局；禁用嵌套 row/col 和 modal-header/body/footer 结构，标题置于 modal-main 内；滚动仅限左侧主区。
Bootstrap 默认的 Modal 是居中单列布局，无论屏幕多宽都只占固定宽度（如 max-width: 500px）。想在大屏（比如 ≥1200px）让它变成左右两栏——左边内容区 + 右边侧边栏（如表单预览、操作说明、图片展示等），不能靠改 modal-dialog 的 width 硬撑，得从结构和响应式类入手重定义布局逻辑。
用 modal-xl 打底，但必须替换默认 flex-column 行为
Bootstrap 5 的 modal-xl 能让模态框最大宽度到 1140px，但这只是“宽”，不是“两栏”。默认 modal-content 内部是 flex-column 堆叠，必须手动覆盖。关键动作是：移除 modal-body 的默认 flex-direction: column，并给它加 display: flex 和 flex-wrap: wrap。
- 不要直接在
modal-body上写class="row"—— 它会和 Bootstrap 的 flex 样式冲突，导致高度塌陷或滚动异常 - 推荐做法：给
modal-body加自定义 class（如modal-body-split），然后在 CSS 中强制设display: flex; gap: 1.5rem; - 两栏子容器用
flex: 1 1 calc(50% - 0.75rem)控制基础宽度，再配合@media (max-width: 1199.98px)降级回 stack
左右两栏内容必须用 div 包裹，禁用 modal-header/body/footer 嵌套
modal-header、modal-body、modal-footer 是垂直流结构，强行在里面塞 row/col 会导致 padding 错位、滚动条错乱、关闭按钮错位。正确结构是把整个内容区“扁平化”：
- 把
modal-body当成一个 flex 容器，里面放两个div（比如modal-main和modal-sidebar） - 每个
div内部再按需使用form、table、img等，不再嵌套modal-body - 如果需要标题，用
<h5>或<div class="modal-title">放在modal-main顶部，别依赖modal-header
响应式断点要手动控制，col-lg-6 在 Modal 里不生效
Bootstrap 的栅格系统（col-*）依赖父容器有 container 或 row，而 modal-dialog 不是 row，所以直接加 col-lg-6 没用。必须用媒体查询或 flex 配合 min-width 控制：
- 小屏（
md及以下）：两栏堆叠，modal-main和modal-sidebar都设width: 100% - 大屏（
lg及以上）：用flex: 1+min-width: 300px防止过窄，右侧栏可固定宽度（如flex: 0 0 320px） - 注意
modal-dialog的margin在大屏下会变（Bootstrap 默认margin: 1.75rem auto），若需左右撑满视口，可加modal-dialog-scrollable并调整max-width
最易被忽略的是滚动行为：两栏高度不一致时，必须明确指定哪个区域可滚动（通常是左侧主内容区），否则整个 modal-body 会双层滚动或卡死。建议给 modal-main 设 max-height: calc(100vh - 200px) + overflow-y: auto，右侧保持自然高度。
