Bootstrap 5 不支持开箱即用的按钮式单选，需通过纯 CSS 隐藏原生 radio 并样式化 label 为按钮，或手动 JS 管理 btn-group 中 button 与 input 的状态同步。
Bootstrap 5 的 form-check 不支持原生按钮式单选？
Bootstrap 5 默认不提供类似 btn-group + type="radio" 的“按钮组单选”开箱即用方案。你看到的 form-check 是基于 <input type="radio"> + <label></label> 的常规样式封装，不是按钮外观。真要按钮效果，得手动组合或改用 btn-group 配合自定义状态管理。
用 btn-group + data-bs-toggle="buttons" 实现（Bootstrap 5.3+）
这是最接近“按钮式单选”的官方路径，但要注意：它依赖 JavaScript 状态同步，且需手动初始化（5.3+ 已移除自动绑定）。
- 必须给每个
<button></button>添加type="button"和data-bs-toggle="button" - 用
<div class="btn-group"> 包裹，并添加 <code>data-bs-toggle="buttons"（注意是复数buttons） - 初始选中项需加
checked属性到对应<input type="radio">，同时给对应<button></button>加active类 - 隐藏原生
<input>，用<button></button>视觉替代，靠 JS 同步值
<div class="btn-group" data-bs-toggle="buttons">
<input type="radio" name="options" id="option1" value="1" checked autocomplete="off">
<label class="btn btn-outline-primary">
<button type="button" class="btn btn-outline-primary active">选项一</button>
</label>
<input type="radio" name="options" id="option2" value="2" autocomplete="off">
<label class="btn btn-outline-primary">
<button type="button" class="btn btn-outline-primary">选项二</button>
</label>
</div>
⚠️ 实际运行会发现点击无响应——因为 Bootstrap 5.3+ 移除了对 data-bs-toggle="buttons" 的默认 JS 支持。你得自己监听 click，手动切换 active 并设置对应 input 的 checked 属性。
更稳妥的做法：纯 CSS 模拟按钮外观 + 原生 radio
避开 JS 状态同步风险，直接用 CSS 把标准 form-check 改造成按钮样貌。关键点是隐藏原生 <input>，用 <label></label> 承担点击区域和视觉样式。
- 给
<input>设position: absolute; opacity: 0; - 给
<label></label>设display: inline-flex; padding: 0.375rem 0.75rem;及border、border-radius等按钮属性 - 用
input:checked + label选择器控制选中态背景/边框 - 保留
name和value，表单提交完全正常
<div class="d-flex gap-2"> <input type="radio" name="theme" id="light" value="light" checked style="position:absolute;opacity:0;"> <label for="light" class="btn btn-outline-secondary">浅色</label> <input type="radio" name="theme" id="dark" value="dark" style="position:absolute;opacity:0;"> <label for="dark" class="btn btn-outline-secondary">深色</label> </div>
这样既不用写 JS，又完全兼容 Bootstrap 的按钮类（btn-primary、btn-sm 等），还能响应 :hover、:focus，表单验证也照常工作。
为什么别用 Bootstrap 4 的 btn-group-toggle？
如果你查旧文档，会看到 Bootstrap 4 有 data-toggle="buttons" 和 .btn-group-toggle 类。但它在 5.x 中已被彻底移除，且存在严重缺陷：
- 不支持键盘操作（Tab 切换 + Space 选中）
- 无障碍属性缺失（没
aria-checked、role="radiogroup"） - 移动端点击反馈延迟或失效
- 与现代表单库（如 React Hook Form）集成困难
强行降级或魔改 4.x 代码，后期维护成本远高于用纯 CSS 模拟或手写轻量 JS 控制。
真正麻烦的不是怎么画出按钮样子，而是让浏览器知道“这是单选控件”，并让屏幕阅读器、键盘用户、自动化测试都能正确识别状态。原生 <input type="radio"> 是唯一被普遍支持的语义化基础，所有“按钮化”都该围绕它展开，而不是绕开它。
