Bootstrap表单验证反馈图标需手动覆盖CSS定位，因默认靠右贴边且依赖绝对定位；应通过position:relative+right/top调整参考点，或改用flex布局实现紧贴输入框、垂直居中及左侧放置。
Bootstrap 表单验证反馈图标默认靠右贴边，但实际项目里经常要它紧挨输入框末尾、或垂直居中对齐文字、甚至移到左侧——这些都不能靠 form-control 自带类解决，得手动覆盖 CSS。
反馈图标位置由 .form-control-feedback 的定位决定
Bootstrap 4/5 中，.form-control-feedback（v4）或 .form-control::after（v5 的伪元素实现）本质是绝对定位在 .form-group 或 .input-group 容器内。它的偏移依赖 right / top 值，不是 margin 或 padding 可调的。
- Bootstrap 4：图标是独立
<span class="form-control-feedback"></span>，父容器需设position: relative - Bootstrap 5：改用
.form-control的::after伪元素，且只在.was-validated或:valid/:invalid状态下渲染 - 直接改
right: 0最快，比如设为right: 28px让图标离右边界留空，避免遮挡清除按钮或密码可见 toggle
让图标紧贴输入框右侧边缘（而非容器右边缘）
当输入框被包裹在 .input-group 或有右侧 addon（如按钮、单位）时，图标若仍按容器右边缘定位，就会叠在 addon 上。这时必须把定位参考点从 .input-group 切换到 .form-control 自身。
- 给
.form-control加position: relative - 重写图标选择器，例如 Bootstrap 5：
.form-control:valid::after, .form-control:invalid::after { position: absolute; right: 0.5rem; /* 相对于 .form-control 右侧 */ top: 50%; transform: translateY(-50%); } - 注意：v5 默认
right: 0是相对于.input-group，所以不加position: relative到.form-control就无效
图标上下居中对齐输入框文字行高
默认图标垂直居中靠 top: 50% + transform: translateY(-50%)，但若输入框用了自定义 line-height 或 padding，这个计算会偏移。
立即学习“前端免费学习笔记（深入）”；
- 更稳妥的方式是用
top: calc(50% - 6px)（假设图标尺寸 12px 高），比 transform 更可控 - 或者直接用 flex 布局替代：把
.input-group设为display: flex，图标用margin-left: auto挤到最右，再配合align-items: center - 避免用
vertical-align: middle，它对绝对定位元素无效
真正麻烦的不是怎么挪图标，而是不同状态（:valid / :invalid / .is-valid / .is-invalid）对应的选择器散落在不同层级，稍不注意就漏覆盖。尤其混合使用 JavaScript 动态校验和原生 HTML5 校验时，CSS 优先级容易打架——建议统一用类名控制，少依赖伪类。
