如何解决Bootstrap移动端搜索输入框与按钮高度不一致问题

你的代码里有几个导致高度不匹配的问题，结合Bootstrap 5的特性，按以下方式修改即可解决：

修改后的代码 #

<div class="col-xs-3">
  <div class="input-group my-2 my-lg-0">
    <input class="form-control" type="text" placeholder="Search" aria-label="Search">
    <button class="btn btn-outline-success" type="submit">
      <i class="fas fa-search"></i>
    </button>
  </div>
</div>

关键修改说明 #

• 移除已废弃的form-inline类：Bootstrap 5中不再推荐使用form-inline，改用input-group组件直接包裹输入框和按钮，它会自动处理内部元素的高度对齐。
• 删除按钮的my-2 my-sm-0类：这个类在移动端（sm断点以下）给按钮添加了上下外边距，挤压了按钮的实际高度，导致和输入框不一致。如果需要给表单整体加间距，把my-2 my-lg-0移到input-group上即可。
• 去掉输入框的mr-sm-2：input-group内部已经默认带有元素间距，不需要额外添加。
• 简化按钮内部结构：直接保留Font Awesome图标即可，多余的span.icon标签没必要。

额外自定义样式（可选） #

如果某些场景下默认样式仍有偏差，可以添加针对移动端的自定义CSS来强制统一高度：

@media (max-width: 575px) {
  .input-group .btn,
  .input-group .form-control {
    height: calc(2.5rem + 2px); /* 匹配Bootstrap默认form-control的高度 */
    padding: 0.5rem 1rem;
  }
}

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