Bootstrap 5 中 form-label 默认不左对齐是设计使然，因其为块级元素，对齐由父容器布局（如 row+col 或 flex）控制；需用 row+col-auto+col 结构配合 align-items-center 实现 label 左对齐、input 右对齐，并确保 input 容器加 flex-fill 或 w-100。
Bootstrap 5 中 form-label 默认不是左对齐？
不是 bug，是设计使然。form-label 在 Bootstrap 5 中默认是块级元素、无浮动、无 text-align 控制，它本身不决定对齐方向，而是靠父容器布局和自身 margin 推动位置。你看到“标签偏左”或“居中”，其实是它在垂直堆叠表单里自然流式左对齐的结果；但一旦进入栅格（row/col）或 flex 容器，它的对齐行为就完全由父级 flex 属性或 col 类控制，form-label 自身不带 text-align: left 这类强制样式。
让 label 左对齐 + input 右对齐：必须用 row + col 结构
别试图只改 form-label 的 class 或 CSS —— 它没这个能力。真正可控的路径是组织结构：
- 把
label和input分开包进不同col，比如col-auto给 label（自动收缩宽度），col给 input 容器（占满剩余空间） - 外层加
row align-items-center：解决 label 文字基线与 input 边框视觉错位问题 - label 加
col-form-label（仅语义+微调 margin/font-weight，不参与布局）和text-end（若需右对齐文字）或text-start（保持左对齐） - input 所在的
div必须加flex-fill或w-100，否则在 flex 容器里不会撑满列宽
示例结构：
<div class="row align-items-center mb-3">
<label for="email" class="col-auto col-form-label text-start">Email</label>
<div class="col flex-fill">
<input type="email" class="form-control" id="email">
</div>
</div>
为什么加了 text-start 还是不对齐？
常见干扰点：
-
col-auto内容过长时会撑宽，挤占 input 空间，导致换行或错位 —— 改用col-sm-3等固定断点列宽更可控 - 父级有
form-floating：它内部用了绝对定位，会覆盖 flex 布局，row+col在里面无效 - label 被套在
form-group里又没删掉旧版 Bootstrap 4 的row类：Bootstrap 5 的form-group已无布局作用，纯语义，保留它只会增加冗余嵌套 - input 缺少
form-control：它默认是display: block，在 flex 容器中不自动拉伸，必须配合flex-fill或显式width: 100%
响应式下 label 换行导致 input 错位怎么办？
小屏时 col-auto 不再“自动”，容易因文字长度触发折行。稳妥做法是放弃 col-auto，改用带断点的栅格：
-
col-12 col-md-3：xs 下 label 占满一行，md 起固定 3 列宽 -
col-12 col-lg-2：适合字段名较短的场景，大屏更紧凑 - label 加
text-truncate防止超长文本撑破容器（需配合white-space: nowrap; overflow: hidden） - 避免在 label 内写多行文本；如需换行，用
br+line-height微调，而非依赖列宽自适应
最易被忽略的一点：所有这些对齐效果，都建立在「label 和 input 必须分属不同列容器」之上。把它们塞进同一个 col 里，再怎么加 text-start 或 justify-content 都无法实现真正的左右分离 —— 因为它们已处于同一文档流层级，不再是独立 flex 项目。
