bootstrap 5 中内联表单需用 row + col-auto + g-2/g-3 实现，form-inline 已废弃；控件须统一加 form-control 并包裹在 col-auto 中；响应式应使用 row-cols-* 类；label 不可移除，须保留语义并视觉隐藏。
内联表单的正确启用方式：form-inline 类必须配合 .row 和 .col 使用
Bootstrap 5 已移除 form-inline 类，但很多人仍沿用旧文档写法，导致样式完全不生效。真正起作用的是 flex 布局组合：需在 <form></form> 上添加 class="row g-2"（或 g-3），再给每个表单控件包裹 <div class="col-auto">。
<p>常见错误是直接给 <code><form></form> 加 form-inline —— 这个类在 Bootstrap 5 中已不存在，浏览器会静默忽略。
<div class="col-auto"> 是关键：它让控件不占满整行，且自动收缩宽度 <li>必须配 <code>g-2或g-3控制间距，否则控件会紧贴在一起- 按钮建议加
class="btn btn-primary"并放在col-auto内，避免换行
input、select、textarea 的尺寸一致性处理
内联时 <input>、<select></select> 默认高度可能不一致，尤其在 Safari 或旧版 Chrome 中。Bootstrap 不会自动对齐它们，必须显式统一。
推荐做法是统一加 class="form-control"，并确保所有控件都包裹在 col-auto 中。若仍有偏差，可补一行 CSS：
.form-inline .form-control {
height: calc(1.5em + 0.75rem + 2px);
}
-
<textarea></textarea>不适合内联布局，高度固定难控制，应改用<input type="text"> -
<select></select>必须加form-select，否则边框/圆角/高度全部错位 - 自定义 checkbox/radio 要用
form-check form-check-inline，不能直接放col-auto
响应式断点下的回退逻辑：何时该放弃内联
内联表单在小屏幕（如手机）上极易溢出或重叠，Bootstrap 不会自动帮你换行 —— 它只负责“当前断点下内联”，不负责“跨断点适配”。
正确做法是用响应式类主动控制：比如在 sm 及以上内联，xs 下恢复垂直堆叠。
- 给
<form></form>加class="row row-cols-1 row-cols-sm-auto g-2" -
row-cols-1让 xs 下每列独占一行；row-cols-sm-auto让 sm+ 恢复自动宽度 - 避免用
d-none d-sm-flex切换 display，会导致表单控件失去语义结构和可访问性
label 标签的隐藏与可访问性保留
内联时经常想“隐藏 label 文字只留 placeholder”，但直接设 visually-hidden 或 sr-only 会导致屏幕阅读器无法识别控件用途。
正确方案是保留 <label></label> 元素，并用 for 关联 id，仅视觉隐藏文字：
<label for="search" class="visually-hidden">Search</label> <input type="search" id="search" class="form-control">
- 绝不能删除
<label></label>或只用placeholder替代 —— 这违反 WCAG 2.1 - 若 label 文字确实冗余（如搜索框旁已有放大镜图标），可用
aria-label替代，但需确保图标本身有role="img"或aria-hidden="true" -
form-text类文本不适合内联场景，它默认块级，会破坏 flex 流
内联表单最难的不是写法，而是平衡紧凑布局、响应行为和可访问性约束——三者稍有偏废，用户在某个设备或辅助工具里就会卡住。
