Bootstrap 5 Input Group组件无法实现多表单元素同行排列问题求助

问题原因 #

• Bootstrap 5 已废弃 input-group-prepend、custom-select 等 Bootstrap 4 版本的类名，旧类不生效导致布局错位
• 数字输入框未添加 form-control 类，默认无宽度约束容易占满父容器触发换行
• 复选框区域不需要用 input-group 包裹，该组件原本是用于输入框前后附加元素的场景，不适合包裹复选框和标签

修复后的完整代码 #

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<div id="price_selection_page" class="border">
   <form class="mt-3 p-2 d-flex align-items-center gap-3">
      <!-- 复选框与标签 -->
      <div class="d-flex align-items-center">
         <input class="form-check-input me-2" type="checkbox" value="" id="set-mark-up-check">
         <label class="form-check-label" for="set-mark-up-check">Set Markup</label>
      </div>
      <!-- 数字输入框与下拉选择框 -->
      <div class="input-group">
         <input class="form-control" type="number" value="" id="mark-up-amount-input">
         <select id="mark-up-select" class="form-select">
            <option value="percentage">% By Percentage</option>
            <option value="amount">¥ By Amount</option>
         </select>
      </div>
   </form>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js" integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT" crossorigin="anonymous"></script>

关键修改说明 #

• 表单外层 d-flex 新增 align-items-center 保证整行元素垂直居中，新增 gap-3 给各组件加合理间距
• 复选框外层替换为普通的弹性容器，适配复选框和标签的布局场景
• 数字输入框添加 form-control 类，适配 input-group 的布局规则
• 下拉框替换为 Bootstrap 5 原生的 form-select 类，替换已废弃的 custom-select
• 移除无用的 input-group-prepend 嵌套结构，input-group 内直接放 form-control 和 form-select 即可实现同行排列

内容的提问来源于stack exchange，提问作者Jacky.S