如何让Bootstrap 5中的select与button保持相同高度？

可以通过以下几种方式让按钮和Select元素高度一致：

方法一：使用Bootstrap原生form-select组件（推荐） #

Bootstrap的form-select与btn组件默认高度匹配，只需替换Select的类名，再通过flex布局让两者同行排列：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">

<div class='container'>
  <div class='row'>
    <!-- 添加d-flex gap-2实现同行排列+间距 -->
    <div class='col-xs-12 button-wrapper d-flex gap-2'>
      <!-- 使用form-select替代btn类，form-select-secondary实现深色风格 -->
      <select id="Language" class="form-select form-select-secondary">
        <option value="en" selected="selected">English</option>
        <option value="fr">French</option>
      </select>
      
      <button class="btn btn-success" onclick="callAPI()"><i class="fa fa-language"></i>Improve</button>
    </div>
  </div>
</div>

如果需要让两个元素平分父容器宽度，给它们添加flex-grow-1类即可。

方法二：保留btn类，通过flex拉伸统一高度 #

如果一定要给Select元素使用btn类，只需给父容器添加d-flex align-items-stretch类，强制子元素高度拉伸一致：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">

<div class='container'>
  <div class='row'>
    <div class='col-xs-12 button-wrapper d-flex align-items-stretch gap-2'>
      <select id="Language" class="btn btn-secondary">
        <option value="en" selected="selected">English</option>
        <option value="fr">French</option>
      </select>
      
      <button class="btn btn-success" onclick="callAPI()"><i class="fa fa-language"></i>Improve</button>
    </div>
  </div>
</div>

方法三：自定义CSS强制统一高度 #

如果以上方法不适用，也可以直接通过CSS设置固定高度：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<style>
/* 统一按钮和Select的高度 */
.button-wrapper .btn {
  height: 48px; /* 可根据需求调整数值 */
  padding: 0 16px;
}
</style>

<div class='container'>
  <div class='row'>
    <div class='col-xs-12 button-wrapper d-flex gap-2'>
      <select id="Language" class="btn btn-secondary">
        <option value="en" selected="selected">English</option>
        <option value="fr">French</option>
      </select>
      
      <button class="btn btn-success" onclick="callAPI()"><i class="fa fa-language"></i>Improve</button>
    </div>
  </div>
</div>

注：原代码中的btn-block类会让元素占满父容器宽度，不适合同行排列场景，建议移除。

内容的提问来源于stack exchange，提问作者Kelly o'Brian