Bootstrap 4 - выберите границу больше 1 пикселя

Question

Я перевожу кодовую базу Bootstrap 3 в Bootstrap 4.

В нашем пользовательском CSS мы применяем настраиваемую ширину границы к .form-control

В демонстрационных целях, скажем, 4px.

.form-control {
    border-width: 4px;
}

Это приводит к различным "высотам" полей input и select.

См. Этот Codepen (протестировано с последним Firefox):

https://codepen.io/anon/pen/ZRprmG

Как правильно оформить элементы управления формы select, чтобы они имели ту же границу и высоту, что и поля input? Редактировать: Бонус Почему есть такая разница?

Answer 1

Я не упомянул, что мы используем SASS Bootstrap Build.Комментарий @Maharkus привел меня на правильный путь: сборка SASS "вычисляет" высоту, используя $ input-border-width.Если установить значение 2px, оно будет работать правильно.

// custom.scss
$input-border-width: 2px !default;

Answer 2

Просто добавьте

.form-control {
   min-height:58%;
 }

рабочая ссылка: https://codepen.io/sidhanshu28/pen/VdKXxq

Answer 3

Добавьте этот CSS в свой стиль -

#inputState{
height: 44px;

}

Answer 4

input.form-control, select.form-control {
   min-height: 46px ;
 }

Answer 5

Использование:

#inputState{
    height: 44px;
}

Как заявить для ввода:

Answer 6

Добавьте следующее к вашему CSS :

#inputState {

  height: 2.75em;

}