代码之家 › 专栏 › 技术社区 › Keithers

当大小减小时,如何保持搜索字段左侧的按钮在其下方?

twitter-bootstrap-3 twitter-bootstrap css

Keithers · 技术社区 · 5 年前

也许有一个非常简单的解决办法,但我不知道如何用语言来表达。当屏幕缩小时,我试图让一个减号按钮进入一个元素下,但它只是遵循自然顺序。

当屏幕变小的时候。

例如,当屏幕大小在移动设备上时,有没有办法在底部设置减号按钮?

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

2 回复 | 直到 5 年前

Shubham Baranwal 5 年前

如果您正在使用 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>

Xenio Gracias 5 年前

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