根本原因是图标依赖的定位上下文（position: relative）缺失或错配，不是图标本身写错了，而是它“找不到站的地方”；Bootstrap 4 中需在 .has-feedback 容器设 position: relative，Bootstrap 5 中须给 .form-control 自身添加该属性并重写 ::after 选择器。
为什么Bootstrap表单验证状态图标位置偏移
根本原因是图标依赖的定位上下文（position: relative）缺失或错配，不是图标本身写错了，而是它“找不到站的地方”。
Bootstrap 4 中 .form-control-feedback 错位的典型原因
Bootstrap 4 的验证图标是独立元素（如 ），必须由其父容器（通常是 .has-feedback 包裹的 .form-group 或 .input-group）提供 position: relative 才能正确锚定。若漏加，图标会向上逐层寻找定位祖先，最终可能相对 body 定位，造成严重偏移。
-
.has-feedback必须存在，且其直接子元素中要有.form-control和.form-control-feedback - 不能把
.form-control-feedback放在.input-group-addon后面又不给.input-group加position: relative - 自定义高度/行高的
.form-control会让top: 3px这类固定值失效，应改用top: calc(50% - 6px)（假设图标高 12px）
Bootstrap 5 中 ::after 伪元素图标不贴输入框右边缘
Bootstrap 5 废除了独立图标元素，改用 .form-control::after 伪元素，但它的 right: 0 默认是相对于最近的 position: relative 祖先——通常是 .input-group，而不是 .form-control 自身。所以即使你设了 right: 0.5rem，图标仍会卡在容器最右边，而非输入框末尾。
- 必须给
.form-control显式添加position: relative - 重写伪元素选择器时，要同时覆盖
:valid::after和:invalid::after，否则只生效一种状态 - 若用了
.was-validated类做批量校验，还需额外匹配.was-validated .form-control:valid::after等组合选择器 -
transform: translateY(-50%)在自定义line-height下易偏移，建议优先用top: calc(50% - 6px)
混合使用 JS 校验和原生 required 时图标消失或错位
JS 主动调用 setCustomValidity() 或切换 .is-valid/.is-invalid 类时，会与原生 :valid/:invalid 伪类冲突。浏览器可能只渲染其中一种状态，导致图标不出现、或两种图标叠加错位。
- 统一用类名控制（
.is-valid/.is-invalid），禁用原生伪类：给.form-control加novalidate属性 - 避免同时给同一控件设置
:invalid和.is-invalid，CSS 优先级容易失控 - 动态插入图标时，若 DOM 节点未挂载完成就执行定位计算（如 Vue
mounted阶段），getBoundingClientRect()可能返回0，需加nextTick或setTimeout延迟
真正难调的不是怎么挪像素，而是定位锚点、状态来源、CSS 作用域这三者是否对齐——少一个，图标就“飘”。
