Bootstrap 5 中必须为每个选项单独使用 form-check form-check-inline 容器，保留 form-check 类、唯一 id 与 for 关联、同组 radio 共享 name；横排失效主因是父容器宽度不足、flex-column 覆盖或遗漏 form-check 类。
用 form-check-inline 而不是旧版类名
bootstrap 5 中唯一可靠的方式是给每个选项容器加 form-check-inline，别用 checkbox-inline 或 radio-inline——这些在 v5 里已被彻底移除，写了也无效。
它本质是给 form-check 容器加了 display: inline-block 和水平间距，不改 flex 流向，也不对抗父级设置。
- 必须同时保留
form-check类，否则 label 对齐错乱、点击区域变小 - 每个
input必须有唯一id，对应label的for属性，否则点文字不触发选中 - 同组
radio的name值必须一致，否则无法互斥 - 禁止把多个
input塞进同一个form-check容器里，会崩样式、语义错误
为什么加了 form-check-inline 还是竖着排？
常见原因就三个，按优先级排查：
- 父容器宽度不够：比如被
col-12或窄卡片限制，内容挤不下就自动换行 - 父级用了
flex-column、d-flex flex-column或flex-wrap: wrap，直接覆盖了 inline 行为 - 漏写了基础类
form-check，只写了form-check-inline，导致样式链断裂
小屏幕下 form-check-inline 默认退化为垂直排列，这是响应式设计，不是 bug；若需强制横排，得额外覆盖 CSS（但不推荐，破坏可访问性）。
结构必须“一选项一容器”，不能偷懒
下面才是合法写法，复制就能用：
<div class="form-check form-check-inline"> <input class="form-check-input" type="checkbox" id="check1" value="option1"> <label class="form-check-label" for="check1">选项1</label> </div> <div class="form-check form-check-inline"> <input class="form-check-input" type="checkbox" id="check2" value="option2"> <label class="form-check-label" for="check2">选项2</label> </div>
单选框只需改 type="radio" 并统一 name，例如 name="gender"。
别写成：<div class="form-check-inline"><input><input></div>——这违反语义，Bootstrap 不认。
和栅格布局混用时注意父子关系
如果复选框组要和其它组件（如按钮、输入框）并排，别硬塞进 form-check-inline 容器里。更稳的做法是用 row + col 控制整体布局：
-
row必须是col的直接父级，否则负 margin 和 padding 失效 - 两个复选框组想并排，各自用
col-auto或col-6包一层，再放进同一row - 避免对父容器手动写
style="display: flex"，容易和断点类冲突；优先用d-flex flex-md-row
真正容易被忽略的点是：即使所有 HTML 和类名都对，只要父容器用了 flex-direction: column 或设置了 width: 100% 且内容总宽超限，form-check-inline 就会静默失效——它不报错，只默默换行。
