html - Bootstrap 输入组无法正常工作

Question

我试图连续对齐多个表单组件，但是我得到了一些有线行为。这是我想要实现的目标:

如您所见，我希望在同一行中设置标记复选框、标签、数量标记输入(数字)和标记类型(选择)，这是我尝试过的:

<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">
      <div class="input-group d-flex w-25">
         <input class="form-check-input me-3" 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 d-flex">
         <div class="input-group-prepend">
            <input class="form-input" type="number" value="" id="mark-up-amount-input">
         </div>
         <select id="mark-up-select" class="custom-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>

但这是我尝试在浏览器中呈现它时得到的结果: 如您所见，复选框和标签在同一行，但数字输入在新行，选择框也在新行，而不是与数字输入字段显示在同一行.

我正在使用 bootstrap 5，非常感谢您的帮助!

Answer 1

尝试使用 “d-flex” 将内容展开成一行并删除一些不必要的标签。

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<form class="mt-3 p-2 d-flex">
  <div class="input-group d-flex w-25">
    <input class="form-check-input me-3" 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 d-flex">
    <div class="input-group-prepend">
      <input class="form-input" type="number" value="" id="mark-up-amount-input">
    </div>
    <select id="mark-up-select" class="custom-select">
      <option value="percentage">% By Percentage</option>
      <option value="amount">% By Amount</option>
    </select>
  </div>
</form>