调整窗口大小时如何修复''input-group'' div元素的不对齐答案

【问题标题】：How to fix dis alignment of a ''input-group'' div element when resizing the window调整窗口大小时如何修复''input-group'' div元素的不对齐
【发布时间】：2019-06-17 22:28:48
【问题描述】：

我正在使用引导网格系统设置一些输入标签。连续，我有四个输入标签，包括一个提交按钮。在实际窗口中，元素会根据需要显示，但是当屏幕调整大小时，一些元素会向下移动。

此代码在 Angular 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>

我期望的是在调整大小时也将行元素放在同一行中。但是当屏幕调整大小时，行元素是不对齐的。

【问题讨论】：

标签： css angular bootstrap-4

【解决方案1】：

缺少一个类： class="表单控制"

    <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>

【讨论】：