验证码图片与输入框小屏错位的根本原因是未共用同一flex容器导致垂直对齐失效；必须用row+align-items-center包裹二者为直接子元素，并配合img-fluid、h-100、object-fit及object-position精准控制。
为什么验证码图片和输入框总在小屏下错位？
不是图片没加 img-fluid，而是默认行内布局在换行时破坏了视觉对齐基准。Bootstrap 的 .row 在 sm 或更小断点下会强制子项堆叠，如果图片和输入框不在同一 .row 里，或者被额外的 div 包裹，它们就失去共享的 flex 容器高度参考，导致“一个高、一个矮”。
- 验证码图片通常带
height或max-height内联样式，而输入框靠.form-control自身 padding + font-size 决定高度，二者天然不一致 - 直接套
text-center只能水平居中，对垂直对齐无效 - 用
input-group包图片+输入框是常见误操作——input-group不处理跨元素等高，只管内部紧凑连接 - 移动端字体缩放或系统辅助设置会放大文字，进一步拉大输入框高度，但图片高度固定，错位加剧
用 row + align-items-center 强制同轴对齐
必须让图片和输入框成为同一个 .row 的**直接子元素**，且该 row 启用 flex 垂直居中能力。这不是可选项，是结构前提。
- 给外层
div加class="row align-items-center"，不要嵌套在form-group或其他容器里 - 图片用
col-auto包裹，避免文字长度或响应式缩放影响宽度；输入框用col或col-sm-6占剩余空间 - 图片必须加
img-fluid和h-100，并设object-fit: cover防止拉伸变形 - 输入框加
h-100，否则它不会跟随图片高度拉伸
示例结构：
<div class="row align-items-center">
<div class="col-auto">
<img src="/verify" alt="验证码" class="img-fluid h-100" style="max-height: 38px; object-fit: cover;">
</div>
<div class="col">
<input type="text" class="form-control h-100" id="verify" maxlength="4">
</div>
</div>
小屏下图片被裁剪过度怎么微调？
object-fit: cover 在窄屏下会切掉上下内容，尤其当验证码图重点在顶部（比如字母上沿清晰）时，容易切掉关键识别区域。不能换 contain——它会留白，破坏 align-items-center 的对齐效果。
- 优先用
object-position: top把锚点固定在顶部，配合cover保留比例 - 在小屏单独覆盖：
@media (max-width: 576px) { .img-fluid { object-position: top; } } - 如果后端支持，用
<picture>+srcset提供专为小屏裁剪过的版本，比纯 CSS 更可靠 - 避免给图片设固定
height，改用max-height，让它在字体缩放时仍有弹性空间
按钮和刷新图标怎么跟输入框等高？
验证码常配“看不清”刷新按钮，若按钮是 btn 类，它默认有 padding 和 line-height，高度大概率高于输入框。强行加 h-100 会撑开整个 row，反而破坏对齐。
- 把按钮和图片一起放进同一个
col-auto，用d-flex align-items-center gap-1微调间距 - 按钮加
py-1 px-2缩小内边距，再加h-100让它继承父col-auto高度 - 确保按钮和图片都是
row的直接子元素，中间不要插div或span——层级破了，align-items-center就失效
真正难的不是写对类名，而是检查 DOM 层级是否干净。哪怕多一层无关 div，flex 对齐就归零。
