使用Bootstrap 5，我在同一行中有一個按鈕和一個選擇元素，默認情況下它們顯示不同的高度。有沒有可能讓他們一樣高？

<link rel="stylesheet"  integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">

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

您可以添加h-100類來選擇元素

<select id="Language" class="btn btn-secondary btn-block h-100">

你沒有下拉菜單，你有一個本地選擇元素。但是，您可以使用帶有事件處理程序的下拉菜單來更新腳本中的變量。這將解決UI問題。

否則，你不能指望任何圖書館絕對提供你所需要的一切。只需使用一個自定義類來增加select元素的填充，使其最終與按鈕的高度相同。

select.select-btn {
  padding-bottom: calc(var(--bs-btn-padding-y) + 1px);
}

<link rel="stylesheet"  integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">

<div class='container'>
  <div class='row'>
    <div class='col-xs-12 button-wrapper'>
      <select id="Language" class="btn btn-secondary btn-block select-btn">
        <option value="en" selected="selected">English</option>
        <option value="fr">French</option>
      </select>

      <button class="btn btn-success btn-block" onclick="callAPI()"><i class="fa fa-language"></i>Improve</button>
    </div>
  </div>
</div>

我用以下方法解決了這個問題:

#Language, .btn {
    height: 38px; /* Or any specific height you desire */
}