Css 将引导表单输入字段跨模式内的多行对齐

具体而言，问题是：

第一行换行到第二行

输入字段不垂直排列

也许可以使用表格，但这可能会破坏移动设备的响应能力。是否有一种干净/优雅的方法来对齐这些输入字段

对于子孙后代，代码笔上的HTML副本：

<div class="modal fade" id="fjFilterModal">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Filter</h5>
        <button type="button" class="close" data-dismiss="modal">
          <span>&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <div class="form-group row">
          <label class="col-form-label col-md-2">Cost</label>
          <div class=col-md-10>
            <div class="form-inline">
              <div class="form-group mx-2">
                <div class=input-group>
                  <span class=input-group-addon>$</span>
                  <input class=form-control name="max_cost-gte" type=number placeholder="Minimum" step=1 min=0>
                  <span class=input-group-addon>.00</span>
                </div>
              </div>
              to
              <div class="form-group mx-2">
                <div class=input-group>
                  <span class=input-group-addon>$</span>
                  <input class=form-control name="min_cost-lte" type=number placeholder="Maximum" step=1 min=0>
                  <span class=input-group-addon>.00</span>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="form-group row">
          <label class="col-form-label col-md-2">Start date</label>
          <div class=col-md-10>
            <div class="form-inline">
              <div class="form-group mx-2">
                <input class="form-control" type="date" name="min_date-gte">
              </div>
              to
              <div class="form-group mx-2">
                <input class="form-control" type="date" name="min_date-lte">
              </div>
            </div>
          </div>
        </div>
        <div class="form-group row">
          <label class="col-form-label col-md-2">Available units</label>
          <div class=col-md-10>
            <div class="form-inline">
              <div class="form-group mx-2">
                <div class=input-group>
                  <input class=form-control name="sum_vacant-gte" type=number min=0 placeholder="Minimum">
                  <span class=input-group-addon>units</span>
                </div>
              </div>
              to
              <div class="form-group mx-2">
                <div class=input-group>
                  <input class=form-control name="sum_vacant-lte" type=number min=0 placeholder="Maximum">
                  <span class=input-group-addon>units</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>
<button type="button" class="btn" data-toggle="modal" data-target="#fjFilterModal">
  Filter
</button>

滤器
&时代；
成本
$
.00
到
$
.00
开始日期
到
可用单位
单位
到
单位
接近
保存更改
滤器

你真正需要什么？@ChandraShekhar

成本的两个字段在一行上，所有输入字段垂直对齐