<p>应使用 .row + .col 分列 label 和 input 实现对齐，label 设 col-sm-3 col-lg-2、input 设 col-sm-9 col-lg-10；每项独立包裹在 .row 内；垂直间距优先用 Stack 的 gap 属性或 mb-* 响应式类；避免误用 .d-grid。</p>
直接用 .row 包 .col-* 控制 label 和 input 的宽度比例，别套 .input-group 当表单行用——那是为前缀/后缀设计的，不是为对齐服务的。
label 和 input 必须分列，不能共用一个 .col
常见错误是把整个 label+input 塞进一个 .col-md-6 里，结果所有输入框起始位置不一致。正确做法是让 label 占一列、input 占一列，靠网格系统强制对齐：
-
label加class="form-label"，并设col-sm-3 col-lg-2（小屏占 3 列，大屏缩到 2 列） -
input或select放在相邻col里，设col-sm-9 col-lg-10，保证总和始终是 12 - 每个表单项必须独立包裹在
<div class="row">内，否则断点类不会按预期生效
垂直堆叠时用 Stack 而不是硬写 margin-bottom
React-Bootstrap 用户容易忽略 Stack 组件的存在，手动加 mb-3 看似简单，但响应式间距会失效。真实场景中：
-
Stack的gap属性会自动适配断点，比如gap={3}在 sm 下是rem，在 lg 下可配合gap-lg-4单独调大 - 若混用
FormGroup as={Row}和原生Stack，确保FormGroup不带额外 padding/margin，否则间隙叠加 - 纯 CSS Bootstrap 用户则用
mb-3 mb-md-4替代，避免用固定像素值
.d-grid 不适合常规表单，除非你要跨字段对齐
看到「网格」就上 .d-grid 是典型误用。它跳过 Bootstrap 的 12 列断点逻辑，需手写 grid-template-columns，且无法继承 col-md-6 这类语义化类名：
- 表单字段天然有阅读顺序和语义层级，
.row + .col的负 margin 清除机制、自动等高、断点继承更稳 - 只有当你需要「5 个等宽输入框横排，小屏自动折行」这类二维控制时，才考虑
d-grid d-md-grid配style="grid-template-columns: repeat(auto-fit, minmax(200px, 1fr))" - 混用
.row和.d-grid子元素会导致列宽失效、justify-content失效，调试成本远高于重写结构
最常被忽略的一点：表单控件的 width: 100% 是由 .form-control 类注入的，如果外层 .col 宽度没设对，或者父级 .row 没包住，这个 100% 就失去参照系——最终表现就是 input 突然变窄或溢出。
