必须加row，否则col-form-label不生效；Bootstrap 4/5已移除form-horizontal类，col-*需在display:flex的row容器下才能按比例分配宽度，漏掉row会导致标签与输入框堆叠、对齐失控。
水平布局必须加 row，否则 col-form-label 不生效
Bootstrap 4/5 中已移除 form-horizontal 类，但很多人照搬旧写法，只写 col-sm-2 和 col-sm-10 却漏掉 row，结果标签和输入框堆叠而非并排。根本原因是：栅格类（col-*）只有在 display: flex 的父容器（即 row）下才能按比例分配宽度。
正确结构必须包含三层嵌套：
-
form（可选，语义容器） -
div class="form-group row"（关键：row启用 Flex 布局） -
label class="col-sm-2 col-form-label"+div class="col-sm-10"（内容区需包裹控件）
漏掉 row 会导致浏览器把 col-* 当作普通块元素处理，宽度计算失效，对齐完全失控。
b-form-group 的 label-cols 和 content-cols 是响应式断点开关
Bootstrap-Vue 的 b-form-group 组件不依赖 CSS 类名硬编码，而是靠属性驱动布局逻辑。它内部通过 label-cols 和 content-cols 是否存在来判断是否启用水平模式——不是看值大小，而是看有没有传这个 prop。
例如：
-
<b-form-group label-cols="3" content-cols="9"></b-form-group>→ 水平布局，sm 断点起效 -
<b-form-group label-cols-md="2" content-cols-md="10"></b-form-group>→ 仅在 md 及以上生效，小屏自动退化为垂直 - 不传任何
-cols属性 → 垂直布局（默认）
注意：label-cols 本身不带断点前缀时，等价于 label-cols-sm；若同时传了 label-cols-sm 和 label-cols-lg，组件会按断点优先级合并生成对应类名，无需手动写媒体查询。
表单不能直接包在 row 里，col 必须是 row 的直系子元素
常见错误是把整个 form 放在 div class="row" 内部，再让 col-* 成为 form 的子元素。这种结构破坏了 Bootstrap 的 Flex 布局前提：所有 col-* 必须是 row 的直接子节点。
后果很直接：
- 列宽百分比失效（如
col-md-4不再占 1/3 宽度） - 移动端断点错乱（
col-sm-6在小屏可能撑满整行或完全消失） - 某些浏览器渲染出空白间隙或高度塌陷
修复方式只有两种：
- 把
form移到每个col-*内部（适合每项独立提交） - 把
form去掉，用div class="row"包住所有col-*，再在每个col-*内放b-form-group或原生表单组（推荐）
input-group 里的 span 长度不一时，对齐靠 row + col 控制，不是靠 input-group 自身
input-group 只负责把 addon 和 input 拉成一行，但它不具备跨多行的列对齐能力。当多个 input-group 堆叠时，如果前缀 span.input-group-text 文字长度不同（比如“姓名” vs “身份证号”），后续 input 的左边缘就会参差不齐。
真正能强制对齐的是外层栅格：
- 给每个
input-group外包一层div class="row" - 把
label放在col-sm-2，input-group放在col-sm-10 - 确保所有
col-sm-2宽度一致，自然就锁定了输入框起始位置
不要试图用 min-width 或 text-align 微调 input-group-text —— 那只是掩盖问题，换一个翻译或字体就崩。
最易被忽略的一点：Bootstrap 5 的 col-form-label 默认有 padding-top: .5rem，而 b-form-group 的垂直间距由 mb-3 这类工具类控制。混用时若没统一重置 margin/padding，表单上下留白会莫名其妙变大——建议用 DevTools 检查 computed styles，而不是凭感觉调 mt-2。
