form-control-sm 和 form-control-lg 对 checkbox 无效，因其视觉由 label::before/::after 实现；应直接调整伪元素尺寸或修改 Sass 变量 $form-check-input-width。
form-control-sm 和 form-control-lg 对 <input type="checkbox"> 完全无效——这是最常被误踩的起点。bootstrap 的复选框尺寸控制逻辑和输入框完全不同，必须绕开尺寸类，直接操作伪元素或 sass 变量。
为什么 form-control-sm 不生效
Bootstrap 默认把 <input type="checkbox" class="form-check-input"> 设为 opacity: 0 + position: absolute，视觉部分由 label::before 和 label::after 承担。尺寸类只作用于 .form-control 系列组件，不触达 .form-check-input 的伪元素体系。
-
form-check-input本身不渲染可见框，只是触发器 - 真正显示外框的是
.form-check-label::before（未选中态） - 真正显示对勾的是
.form-check-input:checked + .form-check-label::after - 任何直接给
input[type="checkbox"]设置width/height都会被忽略
用 CSS 直接改 ::before 和 ::after 尺寸
这是最稳妥、无需 Sass 编译的实操方式。关键点是同步调整 ::before 的宽高、边框、圆角，以及 ::after 的内容尺寸和定位偏移。
-
.form-check-label::before控制外框：设width、height、border-radius、border -
.form-check-input:checked + .form-check-label::after控制对勾：用content: "✓"或 SVG，靠font-size+top/left微调位置 - 若用
transform: scale()替代zoom，兼容 Firefox，但需注意父容器overflow: hidden可能裁剪 - 垂直居中依赖
vertical-align: middle或display: flex，不要只调margin-top
.form-check-label::before {
width: 20px;
height: 20px;
border: 2px solid #adb5bd;
border-radius: 4px;
}
.form-check-input:checked + .form-check-label::after {
font-size: 14px;
top: 3px;
left: 4px;
}
修改 Sass 变量（适合项目级统一调整）
如果你用的是 Bootstrap 源码或已配置 Sass 构建流程，改 $form-check-input-width 是最干净的方式——它会自动重算所有相关尺寸（如 margin、line-height 适配）。
- 变量名是
$form-check-input-width，不是$checkbox-size或其他别名 - 默认值为
1.25em（约 20px），可设为1.5em或具体像素值 - 配套变量
$form-check-input-height通常与 width 一致，建议保持相等 - 改完必须重新编译 CSS，否则无效果；CDN 引入的 CSS 文件无法通过变量生效
避开 zoom 和 transform: scale() 的坑
虽然 zoom: 1.2 看似简单，但它在 Firefox 完全不支持；而 transform: scale(1.2) 会破坏点击热区和文字基线对齐，尤其当 label 内含多行文本时。
-
transform: scale()让伪元素缩放，但top/left偏移值不会自动缩放，必须手动重算 - 缩放后 label 文字可能和 checkbox 视觉错位，需额外加
transform-origin - 无障碍工具（如屏幕阅读器）不受影响，但键盘焦点框会按原始尺寸渲染，造成体验割裂
- 如果只是临时调试，可用
devtools临时加scale()看效果，但不要进生产代码
真正要改大小，核心就两条路：要么动伪元素的 ::before/::after（推荐），要么改 Sass 变量（适合长期维护）。别在 input 上硬加 width，也别指望 form-control-sm 能管 checkbox——它从设计上就没打算管。
