分段控制器需手动实现单选互斥逻辑与视觉反馈，bootstrap 5 无内置类支持；须用 js 控制 .active 状态、完善可访问性属性，并精细调整圆角、flex 布局及响应式行为。
分段控制器不是加个类就能成的
Bootstrap 5 没有叫 btn-segmented 或 btn-toggle-group 的内置类。所谓“分段控制器”，本质是让按钮组具备单选互斥行为 + 视觉状态反馈，而原生 .btn-group 只负责排列，不处理选中逻辑。直接套用 .btn-group 写一堆 .btn，点击后按钮不会自动变 active，也不会取消其他项——这根本不是样式问题，是交互缺失。
必须手动控制 active 状态，CSS 才有作用对象
Bootstrap 的 .active 类只起视觉效果，它不绑定任何 JS 行为。你要让它生效，得自己监听点击、切换 class：
- 给每个按钮加
role="button"和tabindex="0"（否则键盘不可聚焦） - 用
document.addEventListener('click', ...)捕获事件，别给每个按钮单独绑 - 点击时移除所有
.active，再给目标按钮加上 - 禁用项要同时设
disabled属性和aria-disabled="true"，否则屏幕阅读器读不出来
示例关键逻辑：
document.querySelector('.btn-group').addEventListener('click', e => {
if (e.target.matches('.btn')) {
document.querySelectorAll('.btn').forEach(btn => btn.classList.remove('active'));
e.target.classList.add('active');
}
});
用 CSS 驱动视觉差异，但别碰 border-radius 和 border-collapse
分段控制器最易翻车的是圆角和边框合并。默认 .btn-group 依赖 margin-left: -1px 实现无缝拼接，但首尾按钮的圆角是独立的——你一加 .active 样式，就会发现左右两侧圆角被“吃掉”一半。
- 重置子按钮的
margin-left：用更具体选择器覆盖，比如.segmented-group > .btn { margin-left: 0; } - 手动补全首尾圆角：
.segmented-group > .btn:first-child { border-radius: 0.375rem 0 0 0.375rem; }，:last-child同理 - 中间按钮的左右圆角必须设为 0，否则会出现“双圆角缝”
- 别用
border: none粗暴清边框——要保留 hover/focus 下的 outline 和 focus ring
响应式下分段控制器会“断开”，得提前防住
小屏时按钮宽度撑满，.btn-group 默认仍是 flex-direction: row，按钮挤成一行甚至换行错位。这不是 bug，是 flex 容器在空间不足时的自然行为。
- 用
flex-wrap: wrap允许换行，但需配合gap控制间距（注意 IE 不支持） - 更稳妥的做法：小屏切垂直堆叠，加
flex-column flex-md-row类组合 - 垂直时，首尾圆角规则要反着写：
:first-child → top, :last-child → bottom - 如果用了
btn-sm或btn-lg，记得同步调整gap值，不然小号按钮间隙过大，大号按钮又贴太紧
真正麻烦的不是写几行 CSS，而是圆角规则、flex 方向、尺寸类、可访问性属性这四者一旦叠加，改一处，三处崩。动手前先在 DevTools 里看清楚当前按钮的 computed border-radius、margin 和 flex 行为，比瞎试快得多。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
