Bootstrap 4 - 选择大于1 px的边框

Question

我正在将Bootstrap 3代码库迁移到Bootstrap 4。

我是自定义css，我们将自定义边框宽度应用于.form-control

出于演示目的，我们可以说4px。

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

这导致不同的高度＆＃34; 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

将以下内容添加到 CSS ：

#inputState {

  height: 2.75em;

}

Answer 3

使用：

#inputState{
    height: 44px;
}

声明输入：

Answer 4

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

Answer 5

将此CSS添加到您的样式 -

#inputState{
height: 44px;

}

Answer 6

添加

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

工作链接：https://codepen.io/sidhanshu28/pen/VdKXxq