Bootstrap通过appearance: none+伪元素彻底替换复选框渲染，视觉样式由label::before（外框）、input:checked+label::after（勾选符号）等伪元素控制，依赖input与label同容器、input在前、for属性匹配等结构约束。
Bootstrap 的 reboot.css 并不会直接“变形”原生复选框，而是通过 appearance: none + 伪元素覆盖的方式彻底替换其渲染——你看到的不是原生控件，是 Bootstrap 画出来的。
为什么加了 form-check-input 后复选框变小/错位/消失？
根本原因不是样式写错，而是结构或状态控制链断了：
-
input必须和label在同一个div.form-check容器内；缺这个容器，form-check-input的position: absolute; opacity: 0会脱离上下文，导致 label 伪元素定位偏移或失效 -
label必须有for属性，且值严格等于input的id；否则点击无响应，开发者工具里也看不到:checked状态变化 - 如果父级用了
display: flex或transform，可能干扰伪元素的绝对定位参照系，造成图标偏出可视区 - 第三方图标字体（如 Bootstrap Icons）若加载失败，
::after里用的 Unicode 符号（如 "✓"）可能显示为方块或空白，误以为“没勾上”
form-check-input 的视觉样式由谁控制？
不是 input 自身，而是它后面紧邻的 label 的伪元素：
-
label::before画外框（边框、圆角、尺寸） -
input:checked + label::after画勾选符号（位置、颜色、大小） -
input:disabled + label::before控制禁用态灰度 - 所有这些都依赖兄弟选择器（
+），所以input和label必须是 DOM 同级、且input在前
为什么删掉 form-check-input 类反而显示原生复选框？
因为 Bootstrap 默认把 input[type="checkbox"] 和 input[type="radio"] 的 appearance 设为 none，并隐藏（opacity: 0、position: absolute）。一旦去掉该 class，浏览器就恢复原生渲染逻辑——但此时 label 的伪元素还在，可能重叠或错位。真正安全的做法是：保留 form-check-input，只覆盖其伪元素规则，而不是删它。
最容易被忽略的是：伪元素的 top/left 值必须配合 label 的 line-height 和 padding 微调；不同字号下，同一组像素值会导致图标“悬空”或“压底”。别只盯着 border-radius，先看 computed 样式里 label::before 的实际渲染尺寸和位置。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
