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

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 字段相同的边框和高度？ Edit: Bonus 为什么会有这种差异？

Answer 1

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

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