引导输入组无法正常工作答案

【问题标题】：Bootstrap Input Group not working properly引导输入组无法正常工作
【发布时间】：2021-05-19 21:14:58
【问题描述】：

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

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

<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，非常感谢您的帮助！

【问题讨论】：

标签： html css bootstrap-4

【解决方案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>

【讨论】：

不工作，对不起，您介意在您自己的答案下运行代码 sn-p 按钮吗？您现在会看到选择框直接位于数字输入字段下方
我刚刚修改了答案，之前的答案有效，但它只是 sn-p 控制台窗口太小，无法容纳所有内容。请刷新页面并重新运行sn-p。谢谢
它在代码 sn-p 中工作，我复制并粘贴了完全相同的代码，但它在我这边不起作用......
您能否确认您的页面中包含正确的 Bootstrap 版本？或者用你的整个页面更新问题，以便我们进行更多调试。
刚刚编辑了，我也更新了现在的样子

【解决方案2】：

尝试：

<form class="mt-3 p-2">
   <div class="form-row">
      <div class="col">
         <input class="form-check-input" type="checkbox" value="" id="set-mark-up-check">
         <label class="form-check-label" for="set-mark-up-check">Set Markup</label>
      </div>
      <div class="col input-group">
         <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>
   </div>
</form>

查看https://getbootstrap.com/docs/4.0/components/forms/ 了解更多信息。

编辑

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
</head>

<body>
    <div class="container">

        <form class="mt-3 p-2">
            <div class="form-row row">
                <div class="col-3">
                    <input class="form-check-input" type="checkbox" value="" id="set-mark-up-check">
                    <label class="form-check-label" for="set-mark-up-check">Set Markup</label>
                </div>
                <div class="col-6">
                    <div class="input-group">
                        <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>
                </div>
            </div>
        </form>

    </div>
</body>

【讨论】：