如何使按钮与两个下拉框处于同一高度？

你当前的布局问题出在：下拉框都放在.row容器内，而按钮单独在.row外的.float-end容器里，两者不在同一个flex布局流中，自然没法对齐高度。

按下面的方法修改就能解决：

• 把按钮组件移到包含下拉框的.row容器里面
• 给.row加上align-items-center类，让行里的所有元素垂直居中
• 用Bootstrap 5的ms-auto类让按钮靠右，替代原来的浮动布局

修改后的完整代码 #

<!DOCTYPE html>
<html>
   <head>
      <title>HTML CSS JS</title>
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
   </head>
   <body>
      <div class="mt-5 home-content wrapper-component ">
         <div class="card">
            <div class="card-body">
               <!-- 添加 align-items-center 让元素垂直居中对齐 -->
               <div class="row align-items-center">
                  <div class="col-auto">
                     <label for="type" class="col-form-label">TYPE</label>
                  </div>
                  <select class="form-select" style="max-width: 240px">
                     <option selected disabled value="">Choice an item</option>
                     <option [value]="'ALL'">ALL</option>
                     <option [value]="'IN'">IN</option>
                     <option [value]="'OUT'">OUT</option>
                  </select>
                  <div class="col-auto">
                     <label for="status" class="col-form-label">STATUS</label>
                  </div>
                  <select class="form-select" style="max-width: 240px">
                     <option selected disabled value="">Choice a status</option>
                     <option [value]="''">ALL</option>
                     <option [value]="'1'">ENCODE</option>
                     <option [value]="'8'">DELETE</option>
                     <option [value]="'9'">DONE</option>
                  </select>
                  <!-- 将按钮移入row，用ms-auto实现靠右对齐 -->
                  <div class="col-auto ms-auto">
                     <button class="btn btn-secondary" (click)="printPage()">Print</button>
                  </div>
               </div>
            </div>
         </div>
      </div>
   </body>
</html>

.wrapper-component {
    width: 95%;
    margin: 0 auto;
}

关键改动说明 #

• 给row加align-items-center：借助Bootstrap的flex布局特性，让行内所有元素垂直居中，确保按钮和下拉框高度一致
• 按钮移入row内部：让按钮和下拉框处于同一个布局流，避免分离导致的对齐问题
• 用ms-auto替代float-end：通过自动左外边距让按钮靠右，更符合Bootstrap 5的布局规范

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