Bootstrap中label和input默认垂直堆叠且label视觉偏高，是移动优先设计所致；需用row+col-*+align-items-start实现顶部对齐，因vertical-align对块级label无效，强行设置无用。
Bootstrap 表单中 label 和 input 默认垂直堆叠，且 label 文字视觉偏高——这不是 bug，是移动优先设计的结果；要让它们“顶部对齐”，不能靠强行改 vertical-align，得用语义化布局容器控制基线。
为什么直接给 label 加 align-top 没用
label 是块级元素，vertical-align 对块级元素无效；即使写 style="vertical-align: top" 或加 align-top 类，浏览器也会忽略。常见错误现象包括：样式在 DevTools 里显示生效，但视觉毫无变化；或只在部分浏览器中偶现对齐。
-
label的对齐基准是它所在的行盒（line box），而它本身不参与 inline 布局上下文 - Bootstrap 5 中
form-label无display: inline-block，也未设line-height与input匹配 - 试图用
margin-top或padding-top“凑”对齐，会破坏响应式断点下的列宽计算
真正有效的做法：用 row + col-* + align-items-start
把 label 和包裹 input 的容器放进同一个 .row，再用 align-items-start 显式指定交叉轴起点对齐——这是 Flex 布局的原生行为，稳定、可预测。
-
align-items-start作用于.row（display: flex），让子项（label和div.col）顶部贴齐容器上边缘 -
label用col-auto自适应宽度，避免因文字长短导致列错位 -
input必须包在<div class="col">内，否则.row的 flex 子项结构断裂
<div class="row align-items-start mb-3">
<label for="email" class="col-auto col-form-label">邮箱</label>
<div class="col">
<input type="email" class="form-control" id="email">
</div>
</div>遇到多行 label 文字时怎么保持顶部对齐
当 label 文字过长自动换行，col-auto 宽度撑开，可能导致右侧 input 列被压缩甚至溢出——这不是对齐问题，而是栅格容错机制失效。
立即学习“前端免费学习笔记（深入）”；
- 给
label加white-space: nowrap+text-overflow: ellipsis+overflow: hidden强制单行（适合固定长度场景） - 改用
col-md-3等固定比例列代替col-auto，确保左右列宽稳定 - 若必须支持长 label，把整个
.row包进<div class="d-flex flex-column">，再对内部label单独设align-self-start
最易被忽略的一点：不要在 .row 上同时加 align-items-center 和 align-items-start——后者会被前者覆盖，CSS 层叠规则不会因“后写”就生效，必须删掉冲突类。
