直接用row + align-items-center可解决90%表单对齐问题，前提是label和input均为row的直接子元素且各自包裹在col容器中；因默认基线错位导致视觉不齐，需通过flex垂直居中对齐文字中线与输入框内容区中线。
直接用 row + align-items-center 就能解决 90% 的表单对齐问题，前提是 label 和 input 都是 row 的**直接子元素**，且各自包裹在独立的 col 容器里。不是类没加对，而是 DOM 层级一错，Flex 就失效。
为什么 label 和 input 总是“看起来没对齐”
不是它们真没对齐，而是默认基线错位：label 文字底部和 input 边框中线视觉上不重合。Bootstrap 5 把 form-label 设为块级元素，本意是移动优先——但桌面端必须主动干预布局。
-
form-label和form-control都是块级，不加容器会垂直堆叠 - 即使强行
display: inline-block，也会因line-height、padding、font-size差异导致视觉偏移 -
form-group在 Bootstrap 5 中已无布局能力，继续套用不会生效
用 row + col-* 强制水平并排且垂直居中
核心是让 row 成为 flex 容器，并统一子项的交叉轴对齐方式。
- 必须把
label和input（或其包裹div）都放进同一个row，且各自是row的直接子元素 - 给
row加align-items-center：强制所有子项在垂直方向居中对齐（文字中线 ≈ 输入框内容区中线） - 用
col-auto包label，避免文字长度影响输入框宽度；用col或col-8让input自适应剩余空间 - 不要用
input-group当标签容器——它不负责跨行对齐，只管内部紧凑连接
<div class="row align-items-center mb-3">
<label for="username" class="col-auto col-form-label">用户名</label>
<div class="col">
<input type="text" class="form-control" id="username">
</div>
</div>警告框、错误提示与 input 等高怎么搞
常见错误是给 .alert 加固定高度或 h-100，结果在小屏幕换行或字体缩放时崩掉。正确做法靠 flex 拉伸，不碰具体数值。
- 把
label、input、.alert全塞进同一个row，并加align-items-stretch——这是关键 - 给
input加h-100，让它继承父col的动态高度（该高度由align-items-stretch撑开） - 给
.alert加mb-0 py-1：去掉默认下边距，减小内边距，避免额外高度破坏拉伸一致性 - 确保
.alert是row的直接子元素，不能嵌在另一个div里再进row
最容易被忽略的结构陷阱
对齐失效往往不是类名没加对，而是 DOM 层级破了 Bootstrap 的 flex 布局前提。
-
col-*必须是row的**直接子元素**，中间插个form、div或ng-container都会导致align-items-*失效 - 响应式断点（如
col-md-4）下，如果label文字太长，col-auto可能撑宽整行——此时应换用col-md-2固定 label 宽度 - 不要在
row上同时加align-items-center和align-items-start——后者会被前者覆盖，CSS 层叠规则不会因“后写”就生效，必须删掉冲突类
