css - 当尺寸缩小时，如何将位于搜索字段左侧的按钮保留在其下方？

Question

可能有一个非常简单的解决方案，但我不知道如何用语言表达。当屏幕尺寸缩小时，我试图让一个减号按钮位于元素下方，但它只是遵循自然顺序。

当屏幕变小时。

例如，当屏幕尺寸在移动设备上时，有没有办法让底部的减号按钮？

                    <div class="form-group">
                        <label class="col-form-label col-form-label-lg">Boarded</label>
                        <div class="form-row">
                            <div class="col-sm-5">
                                <button type="button" class="btn btn-dark btn-number btn-lg btn-block"
                                    (click)="decreaseBoardedValueClicked()">-</button>
                            </div>
                            <div class="col-sm-2">
                                <input type="number" pattern="[0-9]*" inputmode="numeric"
                                    class="form-control form-control-lg input-group-text" name="boarded" min="0"
                                    [(ngModel)]="log.boarded" #logBoarded="ngModel" required>
                            </div>
                            <div class="col-sm-5">
                                <button type="button" class="btn btn-success btn-number btn-lg btn-block"
                                    (click)="increaseBoardedValueClicked()">+</button>
                            </div>
                        </div>
                        <div class="alert alert-warning" *ngIf="logBoarded.errors?.required && logBoarded.touched">
                            The number of passengers boarded is required.
                        </div>
                        <div class="alert alert-warning" *ngIf="logBoarded.errors?.pattern && logBoarded.touched">
                            Invalid input. It can only contain counting numbers.
                        </div>
                    </div>

Answer 1

如果您使用的是 bootstrap v4，那么您应该使用 bootstrap order classes 来维护元素的顺序。这是您的问题的现场演示，也可以查看 JSfiddle

Reordering Bootstrap

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<div class="form-group">
  <label class="col-form-label col-form-label-lg">Boarded</label>
  <div class="form-row">

    <div class="col-md-2">
      <input type="number" pattern="[0-9]*" inputmode="numeric" class="form-control form-control-lg input-group-text" name="boarded" min="0" [(ngModel)]="log.boarded" #logBoarded="ngModel" required>
    </div>
    <div class="col-md-5">
      <button type="button" class="btn btn-success btn-number btn-lg btn-block" (click)="increaseBoardedValueClicked()">+</button>
    </div>
    <div class="col-md-5 order-md-first">
      <button type="button" class="btn btn-dark btn-number btn-lg btn-block" (click)="decreaseBoardedValueClicked()">-</button>
    </div>
  </div>
  <div class="alert alert-warning" *ngIf="logBoarded.errors?.required && logBoarded.touched">
    The number of passengers boarded is required.
  </div>
  <div class="alert alert-warning" *ngIf="logBoarded.errors?.pattern && logBoarded.touched">
    Invalid input. It can only contain counting numbers.
  </div>
</div>