时间戳

首页 > 解决方案 > 引导输入组无法正常工作

html - 引导输入组无法正常工作

问题描述

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

在此处输入图像描述

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

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

标签： htmlcssbootstrap-4

解决方案

尝试使用"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>

推荐阅读