使用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>
2条答案
按热度按时间w7t8yxp51#
你可以添加
h-100
类来选择元素yhived7q2#
你没有一个下拉列表,你有一个原生的选择元素。但是,你可以使用一个带有事件处理程序的下拉列表来更新脚本中的变量。这将解决UI问题。
否则,你不能指望任何库提供你需要的所有东西,只需要使用一个自定义类来增加select元素的填充,使其最终与按钮的高度相同。