Bootstrap 5 中用 form-check-inline 实现复选框/单选框横排，需每个选项单独包裹在 div.form-check.form-check-inline 中，input 必须有唯一 id 且 label 的 for 属性严格匹配，同组单选框 name 值相同；若仍竖排，常见原因有容器宽度不足、父级设为 flex-column 或漏写 form-check 类。
Bootstrap 5 中怎么让复选框/单选框横着排？
用 form-check-inline 类，不是 checkbox-inline 或 radio-inline —— 那是 bootstrap 3/4 的旧写法，5 里已彻底移除，硬套会失效。
关键点：每个选项必须单独包裹在 div class="form-check form-check-inline" 里，form-check 不能省，否则 label 对齐错乱、点击区域变小。
- 必须为每个
input设置唯一id，且label的for属性要严格匹配，否则点击文字无法触发选中 - 同组单选框（
type="radio"）必须共用相同的name值，否则无法互斥 - 别把多个
input塞进同一个form-check容器里——这会导致样式崩坏、语义错误
为什么加了 form-check-inline 还是竖着排？
常见原因就三个：容器宽度不够、父级用了 flex-column 或 flex-wrap: wrap、或者漏写了 form-check 基础类。
Bootstrap 5 的 form-check-inline 本质是给 form-check 容器加了 display: inline-block 和水平 margin，它不改变 flex 流向，也不对抗父级 flex 设置。
- 检查父容器是否意外加了
flex-column或d-flex flex-column - 小屏幕下（form-check-inline 默认退化为垂直排列，这是响应式设计，不是 bug
- 如果用了
form-switch或自定义 CSS 覆盖了form-check-input的 display，也会破坏内联效果
复选框组和单选框组的 HTML 结构怎么写才规范？
结构必须“一选项一容器”，不能偷懒合并。下面才是正确写法：
<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 和 name：
<div class="form-check form-check-inline"> <input class="form-check-input" type="radio" name="gender" id="male" value="M"> <label class="form-check-label" for="male">男</label> </div> <div class="form-check form-check-inline"> <input class="form-check-input" type="radio" name="gender" id="female" value="F"> <label class="form-check-label" for="female">女</label> </div>
注意：name 相同、id 不同、for 一一对应——少一个，交互就不可靠。
禁用状态和默认选中怎么加？
禁用直接加 disabled 到 input 上；默认选中加 checked。这两者和布局无关，但容易被忽略细节：
-
disabled必须加在input元素上，加在div容器上无效 - 单选框组中，只允许一个
checked，多加也不会报错，但浏览器只认第一个 - 禁用的复选框/单选框仍需保持完整结构（含
label和for），否则可访问性（a11y）会出问题
真正难搞的不是怎么写，而是怎么让它们在表单验证、JS 动态操作、SSR 渲染时保持一致行为——这些地方的 name、value、checked 状态同步，比排版容易翻车得多。
