如何将两个Bootstrap输入组放在同一行上？

Question

期望结果："X%和Y%之间"，以及输入组，都在同一行上。

这适用于常规表单字段，但不适用于输入组。

between
<div class="input-group d-inline-block" style="width: 5em;">
  <input type="text" class="form-control" >
  <div class="input-group-append">
    <span class="input-group-text">%</span>
  </div>
</div>
and
<div class="input-group d-inline-block" style="width: 5em;">
  <input type="text" class="form-control" >
  <div class="input-group-append">
    <span class="input-group-text">%</span>
  </div>
</div>

- Marius

Answer 1

在 input-group 上使用类 d-inline-flex align-items-center w-auto:

body { padding: 1em; }

input.form-control { width: 3em; }

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />

<div class="input-group d-inline-flex align-items-center w-auto">
  between&nbsp;<input type="text" class="form-control">
  <div class="input-group-append">
    <span class="input-group-text">%</span>
  </div>
</div>
<div class="input-group d-inline-flex align-items-center w-auto">
  and&nbsp;<input type="text" class="form-control">
  <div class="input-group-append">
    <span class="input-group-text">%</span>
  </div>
</div>

- Anurag Srivastava

Answer 2

您可以尝试类似以下的方法：

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>



<form class="form-inline">
  <div class="form-group">
    <div class="input-group">
      <label for="between" class="mr-2">between</label>
      <input type="text" class="form-control" id="between" placeholder="">
      <div class="input-group-prepend">
        <div class="input-group-text">%</div>
      </div>
    </div>
  </div>
  <div class="form-group">
    <div class="input-group">
      <label for="and" class="mr-2 ml-2">and</label>
      <input type="text" class="form-control" id="and" placeholder="">
      <div class="input-group-prepend">
        <div class="input-group-text">%</div>
      </div>
    </div>
  </div>
</form>

- J4R

---

真是巫术 :) input-group-prepend 被附加了(!) 你的代码片段完成了任务，谢谢！不过我会将另一个标记为答案，因为它更简单。 - Marius