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

【问题标题】：Bootstrap 4 - select border larger then 1 pxBootstrap 4 - 选择大于 1 px 的边框
【发布时间】：2018-11-17 03:46:32
【问题描述】：

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

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

出于演示目的，假设为 4px。

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

这会导致 input 和 select 字段的“高度”不同。

查看这个 Codepen（用最新的 Firefox 测试）：

如何正确设置select 表单控件的样式，使其具有与input 字段相同的边框和高度？ 编辑：奖励 为什么会有这种差异？

【问题讨论】：

【解决方案1】：

我没有提到我们使用的是 SASS Bootstrap Build。 @Maharkus 评论让我走上了正确的道路：SASS 构建通过使用 $input-border-width 来“计算”高度。通过将此设置为 2px，它可以正常工作。

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

【讨论】：

【解决方案2】：

只需添加

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

【讨论】：

【解决方案3】：

将此 CSS 添加到您的样式中 --

#inputState{
height: 44px;

}

【讨论】：

【解决方案4】：

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

【讨论】：

【解决方案5】：

用途：

#inputState{
    height: 44px;
}

声明输入：

【讨论】：

【解决方案6】：

将以下内容添加到您的 CSS：

#inputState {

  height: 2.75em;

}

【讨论】：