Bootstrap Ширина ввода изменяется при применении классов проверки

Question

Я создал форму поиска с form-inline классом. Когда я добавляю недопустимо или недопустимо классов для ввода, ширина ввода изменяется. Как исправить ширину элемента управления вводом.

<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>

Вы можете увидеть демо на по этой ссылке

Answer 1

извините, в этом случае текст в поле будет отображаться некорректно. Вы должны исправить поля без допустимых и недействительных классов

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

Answer 2

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