btn-group 默认不支持单选，因其仅为样式容器，无内置交互逻辑；需通过原生 radio+label 实现真单选，或用 JS 手动管理 active 类并兼顾可访问性。
为什么 btn-group 默认不支持单选？
Bootstrap 的 .btn-group 只是样式容器，它不绑定任何交互逻辑——点击按钮不会自动取消其他按钮的 active 状态，也不会同步更新 checked 或 value。你看到的“单选效果”必须手动控制 DOM 状态或借助表单控件（如 ）来实现。
用原生 radio + Bootstrap 样式实现真单选
这是最可靠、无障碍友好、且无需 JS 的方案：把 隐藏，用 包裹按钮，并复用 Bootstrap 的 btn 类。浏览器原生 radio 机制会保证同一 name 下仅一个被选中。
关键点：
-
必须有相同的name属性（如name="options"），否则无法互斥 -
的for属性需匹配input的id，或直接包裹input和按钮文本 - 隐藏
input推荐用visually-hidden（Bootstrap 5+）或position: absolute; clip: rect(0 0 0 0);，避免display: none导致表单提交丢失值
<div class="btn-group" role="group">
<label class="btn btn-outline-primary">
<input type="radio" name="options" value="left" class="visually-hidden">
Left
</label>
<label class="btn btn-outline-primary">
<input type="radio" name="options" value="middle" class="visually-hidden">
Middle
</label>
<label class="btn btn-outline-primary">
<input type="radio" name="options" value="right" class="visually-hidden">
Right
</label>
</div>
用 JavaScript 手动管理 active 类（无表单需求时）
如果只是 UI 层切换状态、不涉及表单提交或后端接收，可以监听点击，手动移除其他兄弟节点的 active，再给当前加。但要注意：
- 必须用事件委托或为每个按钮单独绑定，避免重复绑定
- 不能只靠
click，要兼容键盘操作（如空格/回车触发）需监听keydown - 若按钮含
或，需阻止默认跳转或提交行为 - Bootstrap 5+ 的
data-bs-toggle="button"仅对单个按钮生效，不支持组内互斥
简单示例（假设按钮都是 ）：
document.querySelectorAll('.btn-group .btn').forEach(btn => {
btn.addEventListener('click', function(e) {
e.preventDefault();
this.parentElement.querySelectorAll('.btn').forEach(b => b.classList.remove('active'));
this.classList.add('active');
});
});
容易忽略的细节和兼容性问题
很多人卡在“点了没反应”或“样式不更新”，常见原因：
- 忘记给
.btn-group加role="group"，影响屏幕阅读器识别单选语义 - 使用
btn-group-toggle（Bootstrap 4 中废弃类名），5.x 已完全移除，无效 - JS 方案里用了
querySelectorAll但未等 DOM 加载完成，导致找不到元素 - 混合使用
data-bs-toggle="button"和手写 JS，造成状态冲突（比如点击后active被 toggle 两次） - 移动端 touch 事件未处理，导致部分安卓浏览器响应延迟或失效
真正要落地，优先走 radio + label 路线；只有在动态生成、强交互逻辑或需配合第三方库时，才考虑 JS 控制——而且得补全键盘和可访问性支持。
