直接加padding对单选框没用，因为form-check-input被设为opacity:0和position:absolute而脱离文档流；真正需设置padding的是.form-check-label（须配display:flex/inline-flex），并同步调整伪元素尺寸与定位，确保热区与视觉范围一致。
为什么直接加 padding 对单选框没用
因为 Bootstrap 5 把 input[type="radio"] 设为 opacity: 0 + position: absolute，它本身已脱离文档流，不响应任何尺寸或热区控制。你点的不是 input，而是紧邻的 .form-check-label 及其伪元素；浏览器只把 label 的 content box + padding box 当作可点击区域，而默认 label 没设 padding，热区就只有文字本身那么窄。
真正要改的是 .form-check-label 的 padding 和 display
必须让 label 成为可点击主体，并显式撑开热区：
-
.form-check-label要设display: inline-flex或display: flex（否则 padding 不生效） - 加
padding: 0.375rem 0.75rem（约 6px × 12px），确保最小触控尺寸 ≥ 44px 高度（iOS 强制底线） - 补
min-width: 44px，防止单字 label 被压扁 - 确认
.form-check-label是position: relative，否则伪元素定位会偏移，导致视觉圆圈和热区错位
别漏掉伪元素的尺寸同步调整
光扩 label 热区还不够——如果 ::before 外圈太小，用户点中 padding 区域但没点中外圈视觉范围，仍可能误判为“未触发”。需同步控制：
-
input[type="radio"].form-check-input::before：设width: 18px、height: 18px，并用top: -0.125rem、left: -0.125rem补偿边框溢出 -
input[type="radio"].form-check-input:checked + .form-check-label::after：实心点建议设width: 9px、height: 9px（外圈的 50%），避免过小难识别 - 所有伪元素必须保持
pointer-events: auto（别被父层或全局样式设成none）
移动端真机测试时还点不中？重点查三处
常见失效不是尺寸问题，而是交互链断裂：
-
touch-action: none是否被意外加在轮播容器、模态框遮罩层或自定义组件上？它会拦截所有 touch 事件，连 label 的 click 都收不到 -
user-select: none是否作用于 label 或其父级？它虽不影响点击，但常伴随pointer-events: none一起出现 - 是否用了
button包裹整个表单项？若没设type="button"，点击会触发表单 submit，造成“点了但没反应”的错觉
最易被忽略的是：label 的 line-height 和 font-size 若与伪元素尺寸不匹配，会导致视觉上“圆圈悬空”，用户下意识避开点击——这不是 bug，是人眼对齐预期被打破。
