改变表单输入框的高度

Question

我想调整表单输入框的高度，使文本几乎接触到框的顶部和底部边框。我尝试添加一些 CSS，但没有运气。我正在寻找一个引导 css 解决方案。

.form-group {
  height: 10px;
  width: 30%;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

    <div class="form-group">
      <label for="input">First Name</label>
      <input class="form-control" type="text" name="input" placeholder="Enter text">
    </div>

换句话说（或图片），我想改变这个

到这里：

Answer 1

仅使用 Bootstrap，您最好的选择是：

引导程序 v3

• https://getbootstrap.com/docs/3.4/css/#forms-control-sizes

引导程序 v4

• https://getbootstrap.com/docs/4.5/components/forms/#sizing

您可以从那里手动调整填充以减少字母的顶部/底部与输入框边框之间的间隙。

引导程序 v4：https://getbootstrap.com/docs/4.5/utilities/spacing/

Bootstrap v3：您必须在 <input> 元素上使用 CSS 填充来调整。

Answer 2

我会使用推荐的引导解决方案并覆盖我的 custom.scss 中的 $input-height 变量， 像这样：

$input-height: 1rem;

（覆盖引导变量：https://getbootstrap.com/docs/4.0/getting-started/theming/）