仅在 Angular 的小屏幕上安排两个居中的按钮，它们之间有空格答案

【问题标题】：Arrangement of two centered buttons with space between them only on small screens in Angular仅在 Angular 的小屏幕上安排两个居中的按钮，它们之间有空格
【发布时间】：2022-07-25 17:45:34
【问题描述】：

如何正确调整下面的代码，以便两个按钮在大屏幕上成一行显示，但在小屏幕上它们显示在列中，一个在另一个下方，并且它们之间有一个空格？

  <div class="cancel-appointment-footer">
    <div class="row no-gutters" fxLayout="column" fxLayoutAlign="center center" >
      <div class="col-6">
        <dx-button up-cy-test="cancel-button" (click)="close()" [disabled]="isConfirmingSubject | async"
          class="o-button o-button--cancel cancel-appointment-footer-action">{{ 'No' | translate }}
        </dx-button>
      </div>
      <div class="col-6 text-right">
        <dx-button up-cy-test="confirm-button" (click)="confirm()"
          [disabled]="(isConfirmingSubject | async) || disableConfirm"
          class="o-button  o-button--classic cancel-appointment-footer-action">{{ 'cancel-appointment' | translate }}
        </dx-button>
      </div>
    </div>
  </div>

【问题讨论】：

标签： angular angular-flex-layout

【解决方案1】：

将col-sm-12 作为附加类添加到您的 div 上的 col-6。https://tburleson-layouts-demos.firebaseapp.com/#/responsive

【讨论】：