Bootstrap 5 中使用 .btn-check 隐藏原生单选按钮时，若其 CSS 采用 position: absolute 定位（如默认的 clip + absolute 组合），会导致焦点跳转触发容器滚动至可视区中心；本文提供兼容无障碍、无副作用的替代隐藏方案，并附可立即生效的代码。
bootstrap 5 中使用 `.btn-check` 隐藏原生单选按钮时，若其 css 采用 `position: absolute` 定位（如默认的 `clip` + `absolute` 组合），会导致焦点跳转触发容器滚动至可视区中心；本文提供兼容无障碍、无副作用的替代隐藏方案，并附可立即生效的代码。
在 Bootstrap 5 的垂直按钮组（.btn-group-vertical）中，配合 实现样式化单选控件是一种常见实践。但许多开发者遇到一个隐蔽却烦人的行为：当用户点击靠上或靠下的按钮时，包含按钮组的滚动容器（如设置了 overflow-y: auto; max-height: 290px 的
）会自动滚动，使被点击按钮移至视口垂直中心——这严重干扰用户体验，尤其在模态框（Modal）中更为明显。
该问题的根本原因并非 Bootstrap 逻辑缺陷，而是 .btn-check 默认隐藏策略引发的浏览器焦点管理副作用：
- Bootstrap 5 默认通过 position: absolute + clip 或 clip-path 将原生 移出可视区域；
- 尽管视觉上不可见，该 仍是可聚焦元素；
- 点击关联
- 浏览器为确保焦点元素可见，强制滚动容器，使其“顶部锚点”居中显示 → 表现为整个按钮组向上/向下跳动。
✅ 正确解法是：用语义安全、无障碍友好的方式隐藏 ，同时保持其相对文档流的位置，避免触发意外滚动。
推荐使用以下 CSS 替代默认 .btn-check 样式（已验证兼容 Chrome/Firefox/Safari 及屏幕阅读器）：
.btn-check {
/* 安全隐藏：保留文档流位置，不脱离布局 */
position: relative;
width: 1px;
height: 1px;
margin: -3px 0 -2px 0; /* 微调以抵消 label 行高影响 */
overflow: hidden;
clip: rect(1px, 1px, 1px, 1px);
clip-path: inset(50%); /* 现代浏览器双保险 */
padding: 0;
border: 0;
}
? 关键设计说明：
- position: relative（而非 absolute）确保 始终占据其原始文档流位置，与对应
- clip + clip-path: inset(50%) 是 WCAG 推荐的不可见但可访问内容技术，屏幕阅读器仍能正确读取；
- margin 微调防止因行高差异导致的轻微错位；
- 所有属性均不影响
? 使用建议：
- 将上述 CSS 插入项目全局样式表（如 site.css），或通过
- 无需修改 HTML 结构，所有现有 .btn-check 元素将自动生效；
- 若项目已覆盖 .btn-check 样式，请确保新规则具有足够优先级（例如添加 !important 仅在必要时）。
⚠️ 注意事项：
- 切勿使用 display: none 或 visibility: hidden —— 这会使元素完全不可聚焦，破坏键盘导航与屏幕阅读器支持；
- 避免 opacity: 0 单独使用（需配合 pointer-events: none），否则点击
- 此方案已在 JSFiddle 示例 中完整验证，可直接复现对比效果。
总结：该问题本质是 CSS 隐藏策略与浏览器焦点滚动机制的交互副作用。通过改用语义化、流内定位的隐藏方式，既能彻底阻止非预期滚动，又能保障无障碍访问合规性——这是 Bootstrap 5 自定义表单控件时值得纳入标准实践的最佳模式。
