встроить два элемента с помощью начальной загрузки

Question

Я практикую свои навыки начальной загрузки, но каким-то образом я застрял во вкладке ввода и выбрал

это вывод, который я хочу

Однако я как-то понял

с помощью этого кода

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="col-md-2">
  <label>Length of Stay</label>
  <div class="form-group d-inline">
    <input type="text" class="form-control">
    <select class="custom-select">
      <option disabled selected>Select Length</option>
      <option value="Years">Years</option>
      <option value="Months">Months</option>
      <option value="Days">Days</option>
    </select>
  </div>
</div>

Есть идеи, как это исправить?

Answer 1

добавлен класс начальной загрузки d-flex в form-group.спасибо

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="col-md-2">
  <label>Length of Stay</label>
  <div class="form-group d-flex">
    <input type="text" class="form-control">
    <select class="custom-select">
      <option disabled selected>Select Length</option>
      <option value="Years">Years</option>
      <option value="Months">Months</option>
      <option value="Days">Days</option>
    </select>
  </div>
</div>

Answer 2

Я предлагаю вам использовать display:flex; для этого. Таким образом, вам будет намного проще выровнять свои элементы. Попробуйте этот тестовый код

<div class="col-md-2">
  <label>Length of Stay</label>
  <div class="form-group d-flex flex-row">
    <div>
      <input type="text" class="form-control">
    </div>
    <div>
      <select class="custom-select">
                   <option disabled selected>Select Length</option>
                   <option value="Years">Years</option>
                   <option value="Months">Months</option>
                   <option value="Days">Days</option>
               </select>
    </div>
  </div>
</div>

JS Fiddle Link: https://jsfiddle.net/SJ_KIllshot/ucsvpb29/