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

将col-sm-12 col-md-5类添加到按钮，并将col-sm-12 col-md-2类添加到文本框。希望对您有所帮助

@media (min-width: 576px) {
  .form-row :nth-child(1){order:2}
  .form-row :nth-child(2){order:1}
  .form-row :nth-child(3){order:3}
}

@media (min-width: 768px) {
  .form-row :nth-child(1){order:1}
  .form-row :nth-child(2){order:2}
  .form-row :nth-child(3){order:3}
}

<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-sm-12 col-md-5">
                                <button type="button" class="btn btn-dark btn-number btn-lg btn-block"
                                    (click)="decreaseBoardedValueClicked()">-</button>
                            </div>
                            <div class="col-sm-12 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-sm-12 col-md-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 2

如果您使用的是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>

缩小尺寸后，如何在搜索字段左侧保留一个按钮？

2 个答案: