Modal中两列布局需在modal-body内用row和col-*类实现，因modal-dialog默认max-width:500px会压缩布局，应改用modal-xl或自定义max-width；表单场景推荐g-3间距与form-label+form-control组合，并注意响应式断点及overflow截断问题。
Modal内容区域如何用Bootstrap栅格实现两列布局
直接在 modal-body 内使用 row 和 col-* 类即可，Modal本身不阻止栅格系统生效——它只是个定位容器，内部仍是标准文档流。
常见错误是把 row 放在 modal-header 或 modal-footer 里试图“撑宽”，其实只有 modal-body 是可滚动、有内边距、且默认允许自由排版的区域。
- 确保两列内容放在
<div class="modal-body"> 内部，而不是包裹整个 <code>modal-content - 大屏（≥992px）下用
col-lg-6，小屏自动堆叠为单列；若需从md断点开始分两列，改用col-md-6 - 避免给
col加height: 100%或flex: 1——Modal高度由内容撑开，强制高度易导致溢出或空白 - 加类
modal-xl（对应max-width: 1140px），适合大多数两列场景 - 或自定义类，如
class="modal-dialog modal-wider"，配合 CSS：.modal-wider { max-width: 90vw; } - 不要覆盖
modal-dialog的margin或transform，否则可能破坏居中和动画
为什么Modal默认宽度会压缩两列布局
Bootstrap 5 的 modal-dialog 默认最大宽度是 500px（max-width: 500px），远小于两列 col-lg-6 在大屏下的自然宽度需求，因此两列会被挤成一行或换行。
解决方式不是调列宽，而是放宽对话框限制：
表单类Modal中两列对齐的典型写法
当 Modal 内是表单字段，两列常需顶部对齐、标签右对齐、输入框等宽——这时别只靠栅格，要结合表单工具类。
示例结构（Bootstrap 5）：
<div class="modal-body">
<div class="row g-3">
<div class="col-lg-6">
<label class="form-label">姓名</label>
<input type="text" class="form-control">
</div>
<div class="col-lg-6">
<label class="form-label">邮箱</label>
<input type="email" class="form-control">
</div>
</div>
</div>
-
g-3提供列间距，比默认g-2更宽松，避免拥挤 - 每列内用
form-label+form-control保证样式统一，不用额外重置margin - 若某列内容高度差异大（比如一个带图标输入框、一个纯文本），加
align-items-start到row上防止底部错位
响应式断点选择与兼容性注意点
col-lg-6 在 lg（≥992px）及以上生效，但部分设备（如 iPad Pro 横屏）视口宽度约 1024px，刚好卡在临界点，可能出现“勉强两列但拥挤”或“突然切回单列”。
- 测试时用浏览器设备模拟器拖动宽度，观察 992px 和 1199px 两个关键点
- 如需更稳妥，改用
col-xl-6（≥1200px），同时为lg断点设col-lg-12 col-xl-6实现渐进增强 - IE11 不支持
gap，若用g-3需额外加ms-3等补丁，或降级为mb-3垂直间距
真正麻烦的不是写两列，而是 Modal 的 max-height 和 overflow-y 会截断内容——只要列内有长表单或动态加载区块，就得手动控制 modal-body 的 max-height 和 overflow，不然右边一列可能被裁掉。
