Bootstrap 应用验证 类 时输入宽度发生变化

Question

我已经使用 form-inline class 创建了一个搜索表单。当我将 is-invalid 或 is-valid classes 添加到输入时，输入宽度发生了变化。如何固定输入控件的宽度。

<div class="container">
  <div class="row mt-2">
    <div class="col-sm-6 text-left">
    <!-- Other tags... -->
    </div>
    <div class="col-sm-6 text-right">
      <form class="form-inline float-sm-right">
        <select class="form-control mr-1">
        <option>First Name</option>
        <option>Last Name</option>
        <option>Phone</option>
        <option>Email</option>
        </select>
        <input class="form-control mr-sm-1" type="text">
        <button class="btn btn-dark my-2 my-sm-0" type="submit">
        Search
        </button>
      </form>
    </div>
  </div>
</div>

您可以在 this link

上看到演示

Answer 1

.was-validated .form-control:invalid, .form-control.is-invalid,
.was-validated .form-control:valid, .form-control.is-valid {
        padding-right: 0.75rem;
}

Answer 2

抱歉，在这种情况下，字段中的文本将无法正确显示。您必须更正没有 is-invalid 和 is-valid 类

的字段

.form-inline input:not(.is-invalid),
.form-inline input:not(.is-valid) {
    padding-right: calc(1.5em + 0.75rem);
}