Bootstrap 5 中使用 .btn-check 隐藏单选按钮时，若采用 position: absolute 等破坏文档流的隐藏方式，会导致父容器在点击 label 时意外滚动至 radio 元素位置（常为顶部），从而引发垂直居中跳动。本文提供符合无障碍标准的纯 CSS 替代方案，彻底禁用该行为。
bootstrap 5 中使用 `.btn-check` 隐藏单选按钮时，若采用 `position: absolute` 等破坏文档流的隐藏方式，会导致父容器在点击 label 时意外滚动至 radio 元素位置（常为顶部），从而引发垂直居中跳动。本文提供符合无障碍标准的纯 css 替代方案，彻底禁用该行为。
在 Bootstrap 5 的按钮组（尤其是 .btn-group-vertical）中，当配合 使用时，点击任意按钮后容器自动滚动至中间或顶部，是开发者常遇到却易被忽视的 UX 陷阱。根本原因并非 JavaScript 干预或 Bootstrap 逻辑缺陷，而是 .btn-check 默认样式（或自定义覆盖样式）中对隐藏单选框所采用的 position: absolute 定位策略——它将所有 元素强行“钉”在容器顶部附近，而浏览器原生聚焦行为会尝试将获得焦点的元素（即被点击 label 关联的 radio）滚动进可视区域，从而触发非预期的滚动。
✅ 正确的隐藏方案：兼顾可访问性与布局稳定性
应避免使用 display: none、visibility: hidden 或 position: absolute + top/left 等完全移除元素渲染流或脱离文档流的方式。推荐采用 CSS Clip 技术（符合 WebAIM 隐形内容指南），既确保屏幕阅读器仍能正常识别控件，又让元素在视觉上不可见且不参与布局定位：
/* 替换默认 .btn-check 隐藏逻辑，禁用自动滚动 */
.btn-check {
position: relative; /* 关键：恢复相对定位，脱离绝对定位陷阱 */
clip: rect(1px, 1px, 1px, 1px); /* 旧版浏览器兼容裁剪 */
clip-path: inset(50%); /* 现代浏览器更可靠的裁剪 */
height: 1px;
width: 1px;
margin: -3px 0 -2px 0; /* 微调负边距，防止影响行高 */
overflow: hidden;
padding: 0;
border: 0; /* 清除可能的默认边框 */
}? 为什么有效？
clip 和 clip-path: inset(50%) 将 元素视觉裁剪为一个不可见的 1×1 像素点，但其仍在文档流中占据极小空间（由 height/width 定义），且 position: relative 确保它严格跟随其 HTML 顺序位置（即紧邻对应
? 实际应用建议
- 全局覆盖（推荐）：将上述 CSS 放入项目主样式表，或在
- 避免内联样式干扰：检查是否在 HTML 中为 .btn-check 添加了 style="position:absolute;top:0;" 等属性，需一并移除。
- 验证可访问性：使用 Chrome DevTools 的 Accessibility 面板 或屏幕阅读器（如 NVDA）测试，确认 radio 按钮仍可被正确朗读和操作。
- 响应式适配：该方案在所有视口尺寸下均稳定，无需额外媒体查询。
⚠ 注意事项
- ❌ 不要使用 opacity: 0 + pointer-events: none：虽视觉隐藏，但会禁用焦点获取，导致键盘用户无法操作。
- ❌ 避免 transform: scale(0)：可能引发 Safari 等浏览器渲染异常，且部分辅助技术支持不佳。
- ✅ 始终保留 for 属性与 id 匹配：确保
通过这一轻量级 CSS 调整，你无需修改任何 HTML 结构或引入 JavaScript，即可彻底解决 Bootstrap 5 垂直按钮组点击后强制滚动的问题，同时保障 WCAG 2.1 AA 合规性。对于 Razor Pages、Blazor 或任意前端框架集成场景，该方案均开箱即用。
