Bootstrap 5中需将表单组父容器设为flex-row布局并垂直居中，因默认为flex-column；须自定义CSS添加.form-inline类实现flex-direction:row、align-items:center及gap，同时确保input设flex:1、label设flex-shrink:0。
Bootstrap表单
Bootstrap 5 默认用 flex-column 布局表单组，label 和 input 垂直堆叠。想让标签左对齐、输入框右对齐（水平排列），核心不是改 label 自身，而是改它父容器的 flex-direction。
- 别直接给
label加float: left或display: inline-block—— 会破坏 Bootstrap 的响应式断点和间距类 - 正确做法是给
.form-group（或.mb-3等包裹容器）加flex-row类，再配合align-items-center垂直居中 - 注意：Bootstrap 5 没有内置
flex-row类，得自己补一句 CSS：.form-inline { display: flex; flex-direction: row; align-items: center; gap: 0.5rem; } - 如果用的是
<form class="row"></form>套col，那 label 和 input 要分列，此时flex-direction不起作用，得靠栅格系统控制
为什么加了 flex-row 标签还是换行？
常见原因是子元素没设宽度，或者父容器被其他样式干扰（比如 Bootstrap 的 .form-floating 会强制覆盖布局）。flex-direction: row 只管排列方向，不管换不换行 —— 换行由 flex-wrap 和子项尺寸共同决定。
- 检查父容器是否意外带了
flex-wrap: wrap（比如某些自定义类或重置 CSS） - 给
label加flex-shrink: 0防止被压缩到看不见 - 给
input加flex: 1让它占满剩余空间，避免因内容过长触发换行 - 如果用了
.form-control，它默认是display: block，必须显式改成flex子项行为，否则不响应父级flex
在 Bootstrap 4 和 5 中处理方式有什么区别？
Bootstrap 4 的 .form-group 默认是 display: block，没用 flex；Bootstrap 5 才全面转向 flex 布局。这意味着：
- BS4 必须手动加
class="d-flex flex-row align-items-center"到父容器，且要确保子元素没设width: 100%这类 block 行为属性 - BS5 可以直接复用
flex-row工具类（但注意：官方没提供flex-row，只有d-flex+flex-row组合，而flex-row是 utility 类，需确认版本是否启用 —— BS5.3+ 默认开启，BS5.0–5.2 需在 Sass 中启用$enable-flex-utilities: true） - BS5 的
.form-check（复选框/单选）默认就是水平排列，别误用flex-row到它上面，否则破坏图标对齐
用 CSS 覆盖时，哪些选择器容易踩坑？
最常出问题的是过度具体或层级太深的选择器，导致样式不生效或污染全局。
立即学习“前端免费学习笔记（深入）”；
- 避免写
form .form-group label—— 太宽泛，可能影响所有表单；应限定为.form-inline label这类语义明确的类名 - 别用
!important强顶 Bootstrap 的display: block，优先用更高优先级的组合选择器，比如.form-inline > label - 如果 label 里有
<span class="form-text"></span>，它默认是块级，也会撑开换行，需要单独设display: inline - 移动端适配时，别只写
flex-row，记得加响应式断点：flex-sm-row（BS5）或自定义@media (min-width: 576px) { .form-inline { flex-direction: row; } }
flex-direction，而是 label 和 input 的垂直对齐像素级偏差 —— 它们 baseline 不一致，align-items: center 在不同字体、行高、边框下表现不稳，得靠 margin-top 微调，或者统一用 line-height 对齐。 
