bootstrap 5 中 form-label 和 form-control 换行，主因是父容器误用 flex-column、flex-wrap 或未包裹在 mb-3 容器中；避免混用 form-floating（其 label 为覆盖式设计），确保 label 与 input 同级且顺序正确，并添加 placeholder 属性。
Bootstrap 5 中 form-label 和 form-control 换行了，怎么拉回同一行？
默认情况下它们本该同行——如果换行了，大概率是父容器用了 flex-column、flex-wrap 或者没套对表单布局容器。Bootstrap 5 的表单控件依赖明确的布局上下文，不是加个 class 就自动对齐。
检查你是否把 form-label 和 form-control 直接丢在 div 里，而没包一层 mb-3 或 form-group（后者已废弃，别用）；更常见的是误用了 form-floating——它强制 label 浮动覆盖 input 上方，视觉上就“不在一行”。
- 确保 label 和 input 同级，且包裹在同一个
div class="mb-3"内 - 不要给父容器加
d-flex flex-column，除非你真想垂直堆叠 - 避免混用
form-floating和普通 label：浮动式 label 本身就不和 input 并排，它是覆盖式设计 - 如果用了
col-*栅格类（如col-md-6），确认没漏掉row容器——否则栅格不生效，flex 行为异常
用 form-floating 时 label 总是盖住 input 文字，怎么调？
form-floating 的 label 默认绝对定位在 input 上方，靠 focus 和 input 值非空来触发上移。如果 label 盖住 placeholder 或输入内容，说明 input 缺少 placeholder 属性，或 placeholder 值为空字符串。
- 必须给
input加placeholder="xxx"，且值不能是空字符串（placeholder=""会失效） - label 文字必须写在 input 后面（顺序不能错）：
<input><label>Name</label> - 不要手动改 label 的
top或transform，会破坏 Bootstrap 的 JS 触发逻辑 - 如果 input 是
type="number"或type="date"，部分浏览器 placeholder 不显示，此时 label 无法上移——换用普通布局或加 JS 模拟非空状态
Bootstrap 4 升级到 5 后表单突然错位，哪些 class 被删了？
最常踩的坑是还在用 form-group 和 form-inline：这两个类在 Bootstrap 5 中已被完全移除。前者被 mb-3 等间距工具类替代；后者被 row + col 或 d-flex 取代。
-
form-group→ 改用mb-3（或其他mb-*类）作为外边距控制 -
form-inline→ 改用<div class="row"><div class="col-auto">...</div></div>或<div class="d-flex align-items-center"> <li> <code>sr-only→ 改用visually-hidden（语义等价，但 class 名变了） - 所有
form-control-*（如form-control-lg）仍可用，但需确认父元素没被 flex 容器意外撑开高度 - 给 label 加
d-block mb-1（强制块级+下边距），再给 input 加w-100—— 这是最稳的组合 - 如果 label 需要右对齐（比如和 input 并排），用
col-form-label替代form-label，并配合col-sm-2 col-form-label+col-sm-10栅格 - 避免直接设
width给 input，优先用w-25、w-50等响应式宽度工具类 - 检查是否有 CSS 重置规则（如 * { box-sizing: border-box } 缺失），导致 padding 计算偏差
自定义宽度时 input 总是比 label 宽一截，怎么对齐？
这不是 bug，是 Bootstrap 默认给 form-control 设了 width: 100%，而 form-label 是 inline 元素、无宽度约束。当父容器宽度变化或用了 col 类时，input 会拉满，label 却按文字长度收缩，视觉上就“不对齐”。
真正麻烦的不是 class 怎么写，而是 layout context 是否干净——一个多余的 d-flex、一个漏掉的 row、或者升级后残留的 v4 class，都会让整行表单“突然不听话”。先看浏览器开发者工具里 label 和 input 的 computed display 和 width，比猜更快。
