直接设置input[type="radio"]的width/height无效，因bootstrap 5将其设为opacity:0+position:absolute隐藏，视觉圆圈由.form-check-label::before和::after伪元素绘制，需同步调整二者尺寸及top/left偏移以确保对齐。
直接给 input[type="radio"] 设置 width 或 height 无效——它被 Bootstrap 5 隐藏了，你看到的圆圈根本不是 input 本身。
为什么 width/height 对 input[type="radio"] 没反应
Bootstrap 5 把原生单选框设为 opacity: 0 + position: absolute，完全脱离文档流。视觉上的圆圈和选中点，是由相邻 .form-check-label::before 和 .form-check-label::after 两个伪元素绘制的。浏览器对原生表单控件有强 UA 样式约束，width/height 属性被忽略；transform: scale() 会模糊图标、错位热区，且不响应点击区域变化。
真正要改的是 ::before 和 ::after 的尺寸与偏移
必须同步控制未选中状态的外圈（::before）和选中状态的点（::after），并微调 top/left 补偿边框或缩放带来的基线偏移，否则圆圈会浮高、下沉或被裁剪。
-
input[type="radio"].form-check-input::before：设width和height控制外圈直径，例如16px；若加border: 2px，需配top: -0.125rem; left: -0.125rem抵消边框溢出 -
input[type="radio"].form-check-input:checked + .form-check-label::after：用content: "●"或background-color绘制实心点，width/height应约为外圈的 40%～50%，如外圈16px，则点设8px - 别漏掉
.form-check-label::before的vertical-align: middle和margin-right，否则文字会和圆圈上下错位
常见踩坑点：热区失效、图标模糊、响应式断裂
改完发现点不中？或者在手机上圆圈变小、文字挤在一起？问题往往不在尺寸本身，而在关联逻辑没跟上。
- 热区仍按原始
input尺寸响应——确保.form-check-label是position: relative，且伪元素未用pointer-events: none - 用
transform: scale(1.2)替代尺寸调整？会导致渲染层缩放，图标边缘发虚，且::after的top/left偏移值需同比例放大，极易失准 - 响应式断点里（如
@media (max-width: 768px)）没重写伪元素尺寸？默认只有一套样式，小屏下可能过小或撑破行高 - 用了
font-family: "Bootstrap Icons"或自定义字体图标？得确认content字符能 fallback，否则空白；推荐用 Unicode"●"或 inline SVG base64 更稳
最易被忽略的是：改完尺寸后，.form-check-label 的行高（line-height）和字体大小（font-size）若未同步微调，会导致文字与圆圈在垂直方向“看起来”没对齐——这不是像素偏移，而是视觉基线错觉，得靠 vertical-align 和 margin-top 精调。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
