Modal内容区域实现双列布局需在.modal-body内嵌套.row和.col-lg-6，小屏自动回退为单列；必须成对使用.row与.col-*，避免父容器缺失.row导致栅格失效；modal-dialog默认max-width过小需调大或改用.modal-xl类。
Modal内容区域如何用Bootstrap栅格系统实现双列布局
Modal本身不自带多列结构，但它的.modal-body容器完全支持Bootstrap的栅格类。关键不是“让Modal变成两列”，而是把内容放进.row和.col-*中——Modal只是个容器壳子，布局逻辑全在内部。
- 必须把
.row直接放在.modal-body内（不能套在额外div里，否则可能破坏padding或触发滚动） - 大屏下用
.col-lg-6或.col-xl-6，小屏自动回退为单列（如.col-12） - 避免在
.modal-header或.modal-footer里塞栅格——它们不是设计来承载复杂布局的
为什么直接加col-6有时没效果
常见原因是父容器缺少.row——Bootstrap栅格必须成对出现：.row提供负边距清除浮动，.col-*靠它才能正确对齐。单独写<div class="col-lg-6">会被当普通块级元素处理，宽度不会自适应。
- 错误写法：
<div class="modal-body"><div class="col-lg-6">左</div><div class="col-lg-6">右</div></div> - 正确写法：
<div class="modal-body"><div class="row"><div class="col-lg-6">左</div><div class="col-lg-6">右</div></div></div> - 如果用了
.form-group等带margin的组件，两列之间可能出现间隙——加.g-0到.row可清空间距
Modal宽度不够导致两列被挤换行怎么办
默认.modal-dialog最大宽度是500px（max-width: 500px），远小于两列所需空间。不改宽度，再好的栅格也会折行。
- 方案一：给
.modal-dialog加max-width: 900px（或width: 90%） - 方案二：用
.modal-xl类（Bootstrap 5内置，宽度约1140px）——但需确认是否已引入对应CSS - 方案三：响应式控制，比如
class="modal-dialog modal-lg"+col-xl-6，兼顾中大屏
表单控件在双列Modal里对齐混乱怎么处理
输入框、标签、按钮在不同列里高度/字体大小不一致时，视觉会割裂。这不是栅格问题，而是垂直对齐缺失。
- 统一用
.d-flex .align-items-center包裹每行表单项 - 标签和输入框都加
.form-control-sm或统一.mb-0消除默认margin差异 - 如果用了
.form-check复选框，它默认块级显示，需包一层.d-inline-block或改用.form-check-inline
真正麻烦的是跨列的校验提示或动态加载内容——它们容易打破原有栅格流。这种时候别硬塞进两列，宁可加一个.col-12占满一行放提示信息。
