bootstrap 5 中 form-check 默认垂直堆叠，横向排布需用 form-check-inline 类或 d-flex flex-row 布局；必须共用相同 name 属性才能实现单选互斥。
Bootstrap 5 中 form-check 默认是垂直堆叠的
直接写多个 <input type="radio"> 并套 form-check，浏览器会默认换行显示——这不是 bug，是 Bootstrap 5 的设计预期：表单控件优先保障可访问性和移动端阅读流。横向排布需要显式干预布局。
用 form-check-inline 类最简单
这是 Bootstrap 官方提供的专用类，专为单选/复选框横向排列而设。它通过 display: inline-block 和微调 margin 实现紧凑并排，且保持语义和焦点顺序正确。
使用时注意：
- 每个单选选项（
<div class="form-check">）要单独加 <code>form-check-inline，不是只给父容器加 - 必须保留
form-check类，否则样式和辅助技术支持会丢失 - 不支持响应式自动折行；内容过宽时会溢出容器，需自行控制父容器宽度或用
flex-wrap
<div class="form-check form-check-inline"> <input class="form-check-input" type="radio" name="mode" id="mode-auto" value="auto"><label class="form-check-label" for="mode-auto">自动</label> </div> <div class="form-check form-check-inline"> <input class="form-check-input" type="radio" name="mode" id="mode-manual" value="manual"><label class="form-check-label" for="mode-manual">手动</label> </div>
用 form-check + d-flex flex-row 更灵活
当需要对齐、间距控制、响应式换行或与其他元素混排时，放弃 form-check-inline，改用 Flex 布局更可控。关键是把所有 form-check 包进一个 div 并加 d-flex flex-row（或 flex-nowrap / flex-wrap）。
常见调整点：
- 用
gap-2控制项间距，比手动调margin更可靠 - 加
align-items-center避免文字基线错位（尤其混用图标或小字号时） - 若在
col或form-group内使用，注意父级 padding 可能挤压空间
<div class="d-flex flex-row gap-2 align-items-center">
<div class="form-check">
<input class="form-check-input" type="radio" name="theme" id="theme-light" value="light"><label class="form-check-label" for="theme-light">浅色</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="theme" id="theme-dark" value="dark"><label class="form-check-label" for="theme-dark">深色</label>
</div>
</div>
别忘了 name 属性必须相同才能互斥
横向排列只是视觉效果，真正让单选框“单选”的，是所有选项共用同一个 name 值。漏写或拼错 name，会导致点击无反应或多个同时选中——这种问题在横向排布时更难一眼发现，因为 DOM 结构看起来是平铺的。
检查要点：
- 所有同组 radio 的
name值完全一致（包括大小写） -
id必须唯一，且label的for要精确匹配对应input的id - 不要用
data-name或其他自定义属性替代name
横向排布本身不改变表单提交逻辑，但容易让人忽略基础属性是否写对。调试时先确认 name，再调样式。
