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

轩辕启航 阅读 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>
我来解答 赞 3 收藏
二维码
手机扫码查看
1 条解答
春荣酱~
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