Как разместить две 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>

Answer 1

Использовать классы d-inline-flex align-items-center w-auto на input-group:

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>

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>