Как исправить смещение элемента div '' input-group '' при изменении размера окна

Question

Я настраиваю некоторые входные теги, используя систему сетки начальной загрузки.В строке у меня есть четыре тега ввода, включая кнопку отправки.В реальном окне элементы отображаются по желанию, но когда размер экрана изменяется, некоторые элементы перемещаются вниз.

Этот код работает на угловых 6

<div class="row">
  <div class="col-sm-5">
    <div class="input-group">
      <div class="input-group-prepend">
        <span class="input-group-text">
          <span>Package</span>
        </span>
      </div>
      <select>
        <option [ngValue]="undefined" disabled selected> --Please choose a 
          package--</option>
        <option> Fetching some data from backend </option>
      </select>
    </div>
  </div>
  <div class="col-sm-3">
    <div class="input-group">
      <div class="input-group-prepend">
        <span class="input-group-text">
          <span>Start Date:</span>
        </span>
      </div>
      <input type="text" placeholder="Choose a date" readonly required>
    </div>
  </div>
  <div class="col-sm-3">
    <div class="input-group">
      <div class="input-group-prepend">
        <span class="input-group-text">
          <span>End Date:</span>
        </span>
      </div>
      <input type="text" placeholder="Choose a date" readonly required>
    </div>
  </div>
  <div class="col-sm-1">
    <div class="input-group">
      <button class="btn btn-primary" (click)="OnSubmit()"> Submit </button>
    </div>
  </div>
</div>

What I 'Ожидается, что элементы строки будут в той же строке, что и при изменении размера.но при изменении размера экрана элементы строки не выровнены.

Answer 1

Отсутствует класс: класс = «форма контроля»

    <div class="row">
  <div class="input-group col-sm-5">
      <div class="input-group-prepend">
        <span class="input-group-text">
          <span>Package</span>
        </span>
      </div>
      <select class="form-control">
        <option [ngValue]="undefined" disabled selected> --Please choose a 
          package--</option>
        <option> Fetching some data from backend </option>
      </select>
    </div>

  <div class="input-group col-sm-3">
    <div class="input-group">
      <div class="input-group-prepend">
        <span class="input-group-text">
          <span>Start Date:</span>
        </span>
      </div>
      <input class="form-control" type="text" placeholder="Choose a date" readonly required>
    </div>
  </div>
  <div class="col-sm-3">
    <div class="input-group">
      <div class="input-group-prepend">
        <span class="input-group-text">
          <span>End Date:</span>
        </span>
      </div>
      <input class="form-control" type="text" placeholder="Choose a date" readonly required>
    </div>
  </div>
  <div class="col-sm-1">
    <div class="input-group">
      <button class="btn btn-primary" (click)="OnSubmit()"> Submit </button>
    </div>
  </div>
</div>