如何在Bootstrap 5中使select和button的高度相同?

neskvpey  于 2023-04-27  发布在  Bootstrap
关注(0)|答案(2)|浏览(181)

使用Bootstrap 5,我在同一行中有一个按钮和一个选择元素,默认情况下它们显示不同的高度。是否可以使它们具有相同的高度?

<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 '>
      <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>
w7t8yxp5

w7t8yxp51#

你可以添加h-100类来选择元素

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

yhived7q2#

你没有一个下拉列表,你有一个原生的选择元素。但是,你可以使用一个带有事件处理程序的下拉列表来更新脚本中的变量。这将解决UI问题。
否则,你不能指望任何库提供你需要的所有东西,只需要使用一个自定义类来增加select元素的填充,使其最终与按钮的高度相同。

select.select-btn {
  padding-bottom: calc(var(--bs-btn-padding-y) + 1px);
}
<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'>
      <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>

相关问题