如何使用Bootstrap修正导航栏表单中搜索按钮的尺寸？

嘿，我看你这是用Bootstrap做的导航栏搜索表单，按钮尺寸显示异常大概率是因为默认样式里，按钮和输入框的高度、内边距没对齐导致的。给你几个实用的解决办法：

1. 自定义CSS匹配输入框样式 #

Bootstrap的form-control（也就是你的输入框）默认有固定的高度和内边距，而input-group-btn里的按钮默认样式和它不匹配，我们可以手动调整按钮的样式来对齐：

/* 针对导航栏里的搜索按钮调整样式 */
.navbar-form .input-group-btn .btn {
  /* 和form-control默认高度一致，确保垂直对齐 */
  height: 34px;
  /* 匹配输入框的内边距，让按钮尺寸协调 */
  padding: 6px 12px;
  /* 去掉按钮左边的圆角，和输入框衔接更自然 */
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

把这段CSS加到你的页面里（可以放在<style>标签里或者外部样式文件），就能让按钮和输入框完美对齐了。

2. 完整的修正后代码示例 #

这里给你整合好的代码，直接用就行：

<style>
.navbar-form .input-group-btn .btn {
  height: 34px;
  padding: 6px 12px;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
</style>

<form class="navbar-form" role="search">
  <div class="input-group add-on">
    <input class="form-control" placeholder="Search" name="srch-term" id="srch-term" type="text">
    <div class="input-group-btn">
      <button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button>
    </div>
  </div>
</form>

额外说明 #

如果是用Bootstrap 4的话，注意navbar-form已经被废弃了，应该改用form-inline类，这时候按钮和输入框的对齐逻辑会稍有不同，但核心思路还是让两者的高度、内边距保持一致~

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