html - 当它们折叠时，如何使用 boostrap 网格将值保持在相邻的 2 行的列中？

Question

我有一个如下所示的 Bootstrap 网格 (jsfiddle):

当列在小视口(viewport)上折叠时，它看起来像这样:

我想要的输出是这样的:

我不确定让列保持在一起的最佳方法是什么，因为 bootstrap 会将它们压缩成单独的行

代码:

   <div class="list-group list-group-large list-group-background list-group-background-data settings">
  <div class="list-group-header">
  <div class="list-group-title">
    <h3>Set Alerts</h3>
  </div>
  </div>
  <div class="list-group list-group-large list-group-data">
            <div class="top-row row">
                <div class="col-md-3 col-sm-12"><span>Field</span></div>
                <div class="col-md-3 col-sm-12"><span>Condition</span></div>
                <div class="col-md-2 col-sm-12"><span>Value</span></div>
      <div class="col-md-2 col-sm-12"><span>Units</span></div>
                <div class="col-md-2 col-sm-12"><span>Save/Delete</span></div>
            </div>
            <div class="row" ng-repeat="alarm in alarms">
                <div class="col-md-3 col-sm-12">
                    <select class="form-control">
                        <option>Roll</option>
            <option>Pitch</option>
            <option>Yaw</option>
                    </select>
                </div>
            <div class="col-md-3">
                <select class="form-control">
                  <option>is greater than</option>
                  <option>is less than</option>
                </select>
                </div>
                <div class="col-md-2">
                    <input type="text">
                </div>
      <div class="col-md-2">
      <span>deg</span>
      </div>
                <div class="col-md-2">
                    <button type="button"class="btn btn-success-outline">
                    <i class="fa fa-check"></i> Save</button>
                </div>
      </div>
            </div>
    </div>

Answer 1

你需要添加

<label></label>

检查下面的 JSFiddle

https://jsfiddle.net/sg05vdj8/1/