bootstrap 4.1 последний дочерний элемент в группе ввода теряет закругленные углы, если требуется проверка

Question

В Bootstrap 4.1 последний дочерний элемент в группе ввода теряет закругленные углы, если требуется проверка

см. Пример Пользовательские стили

Есть ли элегантный обходной путь?

Answer 1

Есть класс начальной загрузки rounded-right.Это округляет границы.Добавьте его к input или select или к тому, что вы хотите сделать круглым.

Answer 2

Мое лучшее предположение - создать класс, основанный на определенных @mixin и _variables, но он должен быть !important, чтобы свергнуть :not(:last-child) структуру.Вот так:

.border-right-radius{
    @include border-right-radius($border-radius !important);
}

В моем случае я поставил его рядом с input-group-text, чтобы перезаписать стили для .input-group > .input-group-append:not(:last-child) > .input-group-text.