表单pc端两列、移动端单列的最简写法是成对使用.col-md-6并置于.row内，缺.row会导致堆叠；需注意.modal-dialog宽度限制、对齐问题及小屏显隐控制。
表单在PC端两列、移动端单列的栅格写法
直接用 col-md-6 是最简方案，但必须成对放在 .row 内，且不能遗漏 .row 这个父容器。Bootstrap 栅格不是“加了 class 就自动分两列”，而是靠 .row 的 flex 负边距和子项的宽度计算共同生效。
常见错误是这样写：<div class="modal-body">
<div class="col-md-6">左</div>
<div class="col-md-6">右</div>
</div>
结果小屏正常，PC 端仍堆叠——因为缺 .row，两个 .col-md-6 只是普通块级元素，不参与栅格流。
- 正确结构：
<div class="row"> <div class="col-md-6">左</div> <div class="col-md-6">右</div> </div> - 断点选
md（≥768px）而非lg，覆盖主流笔记本和桌面浏览器宽度 - 不要混用旧版
col-xs-*或 Bootstrap 3 的control-label类，它们在 v5 中已失效 - 若表单字段高度差异大（比如一个带图标输入框 + 一个纯文本），给
.row加align-items-start防止视觉错位
为什么加了 col-md-6 还是一列？检查 modal-dialog 宽度限制
Modal 默认的 .modal-dialog 有 max-width: 500px，而 .col-md-6 是按父容器宽度算的：500px ÷ 2 ≈ 250px，看起来“挤在一起”，甚至因内边距或间距导致换行。
这不是栅格失效，是容器太窄。别去调 .col 的宽度，要改容器本身：
- 最快方案：给
.modal-dialog加modal-xl类（Bootstrap 5 内置，max-width: 1140px） - 更灵活方案：自定义类如
modal-wider，配合 CSS：.modal-wider { max-width: 90vw; } - 避免直接写
style="max-width: 800px"—— 内联样式难复用，且可能被框架 JS 动态覆盖 - 切勿修改
.modal-dialog的margin或transform，会破坏居中和淡入动画
表单控件在两列中对齐不一致怎么办
标签文字大小、输入框高度、按钮行高不统一时，两列会显得割裂。这不是栅格问题，而是垂直节奏没对齐。
推荐组合使用 Bootstrap 工具类，而不是手动设 height 或 line-height：
- 每列内用
form-label+form-control，保证默认间距和字体大小一致 - 加
g-3到.row上（如<div class="row g-3">），比默认 <code>g-2更宽松，避免紧凑挤压 - 如果某列用了
form-check复选框，它默认块级显示，需包一层d-inline-block或改用form-check-inline - 避免给
.col-md-6加height: 100%或flex: 1—— Modal 高度由内容撑开，强制高度易导致滚动异常或空白 -
d-none全局隐藏，d-md-block在 ≥768px 时恢复为block—— 小屏下元素完全脱离渲染流，不占位、不触发重排 - 错误写法：
d-md-block单独用 —— 小屏下继承父容器 display 值（通常是block），依然可见 - 结构示例：
<div class="row"> <div class="col-md-6 d-none d-md-block">PC左</div> <div class="col-md-6 d-none d-md-block">PC右</div> </div> - 注意：如果这两列里有关键操作（如提交按钮），小屏下必须提供替代入口，否则功能缺失
如何确保小屏下彻底单列、不占位、不干扰布局
仅靠 .col-md-6 不够。它在小屏下退化为 width: 100%，但仍是 DOM 元素，仍参与文档流。若想“PC 有、手机无”，得用显隐控制类。
正确做法是组合 d-none d-md-block：
真正容易被忽略的是内容动态加载后的高度重算——比如异步拉取数据后表格变长，Modal 滚动条可能卡住或遮挡。此时需手动触发 modal('handleUpdate')（Bootstrap 5.3+）或重设 modal-body 的 max-height 和 overflow-y。
