Bootstrap 5.2.3元素垂直对齐异常求助：按钮与输入框未对齐

针对你遇到的输入框和按钮垂直不对齐、按钮轻微溢出的问题，给你几个实用的解决思路：

1. 用Bootstrap官方输入组组件（最省心） #

Bootstrap专门提供了input-group组件来处理输入框+按钮的组合场景，能自动统一两者的高度、内边距和对齐方式，直接用这个就不会有对齐问题：

<div class="input-group">
  <input type="text" class="form-control" placeholder="请输入内容">
  <button class="btn btn-primary" type="button">确认</button>
</div>

2. 排查自定义样式冲突 #

如果已经用了input-group但还是出问题，大概率是你自己加的CSS覆盖了Bootstrap的默认样式：

• 检查有没有给input或button单独设置height、padding、margin，这些属性会打破默认的对齐规则
• 看看是不是line-height设置不一致，导致元素垂直偏移
• 把这些冲突的自定义样式删掉，或者调整选择器优先级，别影响Bootstrap的组件样式

3. 手动统一样式（迫不得已时用） #

如果没法用input-group，可以手动强制统一输入框和按钮的样式：

/* 对齐Bootstrap默认form-control的高度和内边距 */
.form-control, .btn {
  height: calc(2.5rem + 2px);
  padding: 0.375rem 0.75rem;
  line-height: 1.5;
  border-width: 1px; /* 确保边框宽度一致，避免溢出 */
}

另外检查按钮有没有多余的overflow设置，或者额外的边框导致溢出，把这些调整掉就行。

4. 用Flex布局强制居中 #

如果是放在普通容器里，给容器加Bootstrap的flex类就能强制垂直对齐：

<div class="d-flex align-items-center">
  <input type="text" class="form-control">
  <button class="btn btn-primary ms-2">提交</button>
</div>

ms-2是用来给按钮加左边距，避免和输入框挤在一起。

内容的提问来源于stack exchange，提问作者user13698713