如何避免输入框出现invalid feedback时图标位置偏移？

使用Bootstrap和Bootstrap Icons开发表单时，触发校验错误（显示invalid-feedback）后，输入框左侧的图标会偏离原有位置。

状态说明 #

• 正常状态：输入框左侧图标位置正常
• 错误状态：输入框左侧图标出现位置偏移

相关代码 #

HTML结构 #

<div class="form-group position-relative has-icon-left mb-3">
     <input type="text" class="form-control form-control @error('username') is-invalid @enderror" id="username"  
     name="username" placeholder="Username">
     <div class="form-control-icon">
         <i class="bi bi-person"></i>
     </div>
    @error('username')
        <span class="invalid-feedback" role="alert">
            <strong>{{ $message }}</strong>
        </span>
    @enderror
</div>

CSS样式 #

.form-group[class*=has-icon-].has-icon-left .form-control-icon{left:0}
.invalid-feedback{display:none;width:100%;margin-top:.25rem;font-size:80%;color:#dc3545}
.form-group{margin-bottom:.7rem}
.position-relative{position:relative!important}
.form-control {
      display: block;
      width: 100%;
      background-color: #f9f9f9;
      padding: 12px;
      border: 1px solid #ddd;
      border-radius: 2.5px;
      font-size: 14px;
      -webkit-appearance: none;
      -moz-appearance: none;
           appearance: none;
      margin-bottom: 24px;
    }
.form-group[class*=has-icon-].has-icon-left .form-control-icon{left:0}.

解决方法 #

核心问题是.form-control-icon未设置绝对定位，它属于文档流，当错误提示元素显示时，布局变化会影响其位置。父元素已设置position:relative，只需给图标容器添加绝对定位和垂直居中样式即可：

.form-group[class*=has-icon-].has-icon-left .form-control-icon {
  left: 0;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  padding: 0 12px; /* 和输入框内边距保持一致，确保图标位置合理 */
}

同时清理重复的CSS规则（原代码中重复定义了.form-group[class*=has-icon-].has-icon-left .form-control-icon{left:0}），避免冗余。

内容的提问来源于stack exchange，提问作者Wesley