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

Question

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

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

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

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

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

请参阅此 Codepen（使用最新的 Firefox 测试）：

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

score 1 · Accepted Answer

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

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

score 0 · Accepted Answer

只需添加

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

score 0 · Accepted Answer

0

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

#inputState {

  height: 2.75em;

}

于 2018-06-07T09:27:51.160 回答

score 0 · Accepted Answer

0

利用：

#inputState{
    height: 44px;
}

作为声明输入：

于 2018-06-07T09:28:11.303 回答

score 0 · Accepted Answer

0

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

于 2018-06-07T09:30:12.627 回答

score 0 · Accepted Answer

0

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

#inputState{
height: 44px;

}

于 2018-06-07T09:30:23.610 回答

6 回答 6