Bootstrap表单的输入框为什么高度不一致？

轩辕启航提问于 2026-03-27 10:35:19 阅读 20

组件

我在用Bootstrap 5写一个登录表单，发现文本输入框和下拉选择框的高度不一样，看起来很别扭。明明都加了form-control类，但select比input矮一点，这是啥原因？

我试过加form-select类到select上，也检查了有没有额外的CSS干扰，但问题还在。下面是相关代码：

<div class="mb-3">
  <input type="text" class="form-control" placeholder="用户名">
</div>
<div class="mb-3">
  <select class="form-control form-select">
    <option>请选择角色</option>
    <option>管理员</option>
  </select>
</div>

UI框架栅格系统

我来解答赞 3 收藏

反馈

1 条解答

春荣酱~ Lv1

form-select类要单独用，别跟form-control混着写。把select的class改成只用form-select应该能用。代码这样：



<div class="mb-3">

  <input type="text" class="form-control" placeholder="用户名">

</div>

<div class="mb-3">

  <select class="form-select">

    <option>请选择角色</option>

    <option>管理员</option>

  </select>

</div>

这问题整了我好久，bootstrap的样式有时候真让人头大。

2026-03-27 11:00