Bootstrap v.4.1 - 输入中断内的图标答案

【问题标题】：Bootstrap v.4.1 - Icon inside input breaksBootstrap v.4.1 - 输入中断内的图标
【发布时间】：2018-07-11 17:32:02
【问题描述】：

我目前正在使用 Angular 6 和最新版本的 Bootstrap v4.1 现在我尝试在输入表单中构建一个带有图标的反应式表单。由于引导程序中实际上没有办法将图标放在输入的左侧 - 我需要自己破解它。但这并没有真正起作用。让我们仔细看看：

用例1

当没有错误消息时 - 它看起来一切都很好并且符合预期：

用例2

但是当表单更改并且消息出现时 - 图标会从表单中断开：

代码

html:

<form [formGroup]="registerForm">
          <div class="form-group required">
            <label class="control-label">Email address:</label>
            <input formControlName="username" type="email" class="form-control">
            <span *ngIf="isFieldInvalid('username')" class="form-control-feedback-invalid-username"><fa class="danger" [name]="'ban'"></fa></span>
            <span *ngIf="isFieldValid('username')" class="form-control-feedback-valid-username"><fa class="danger" [name]="'check'"></fa></span>

            <span *ngIf="isFieldValidWithErrorType('username', 'required')" [ngClass]="displayFieldCss('username', 'required')">Username has to be set.</span>
            <span *ngIf="isFieldValidWithErrorType('username', 'email')" [ngClass]="displayFieldCss('username', 'email')">Email should have right pattern.</span>
          </div>

      <div class="form-group required">
        <label class="control-label">Password:</label>
        <input formControlName="password" type="password" class="form-control">
        <span *ngIf="isFieldInvalid('password')" class="form-control-feedback-invalid-password"><fa class="danger" [name]="'ban'"></fa></span>
        <span *ngIf="isFieldValid('password')" class="form-control-feedback-valid-password"><fa class="danger" [name]="'check'"></fa></span>

        <span *ngIf="isFieldValidWithErrorType('password', 'required')" [ngClass]="displayFieldCss('password', 'required')">Password has to be set.</span>

      </div>
        </form>

重要的类是form-control-feedback-username/password。它在 css 中如下所示：

.form-control-feedback-invalid-username {
  position: absolute;
  z-index: 2;
  right: 25px;
  top: 77px;
  color: red;
  line-height: 34px;
  pointer-events: none;
}

.form-control-feedback-valid-username {
  position: absolute;
  z-index: 2;
  right: 25px;
  top: 77px;
  color: #35ef5f;
  line-height: 34px;
  pointer-events: none;
}

【问题讨论】：

错误文本将输入拉下，但由于图标具有绝对位置，它们保持在同一位置......您可以制作跨度消息position: absolute 或添加相对于的位置.form-group

标签： html css twitter-bootstrap bootstrap-4 angular-reactive-forms

【解决方案1】：

通过反复试验和@marco gomes 的建议，我弄清楚了图标是如何保持一致的：

.form-group {
  position: relative;
  .form-control-feedback-invalid-username {
    position: absolute;
    z-index: 2;
    top: 40px;
    right: 10px;
    color: red;
    pointer-events: none;
  }

  .form-control-feedback-valid-username {
    position: absolute;
    z-index: 2;
    top: 40px;
    right: 10px;
    color: #35ef5f;
    pointer-events: none;
  }

  .form-control-feedback-invalid-password {
    position: absolute;
    z-index: 2;
    top: 40px;
    right: 10px;
    color: red;
    pointer-events: none;
  }

  .form-control-feedback-valid-password {
    position: absolute;
    z-index: 2;
    top: 40px;
    right: 10px;
    color: #35ef5f;
    pointer-events: none;
  }
}

【讨论】：