对齐Angular Material表单字段和分页符

Question

我正在尝试将Angular Material mat-form-field和mat-paginator对齐在同一行。我希望表单字段向左冲洗，而paginator向右冲洗。填充太多了。有人可以帮忙吗？

<div class="container-fluid">
  <div class="row">
    <div class="col-6">
      <mat-form-field>
        <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Search:">
      </mat-form-field>
    </div>
    <div class="col-6">
      <mat-paginator [pageSizeOptions]="[5, 10, 20]" showFirstLastButtons></mat-paginator>
    </div>
  </div>
</div>

Answer 1

问题解决了。我为这行添加了一个css样式。

.spaceBetweenFlex {
  display: flex;
  flex - direction: row;
  justify - content: space - between;
}

<div class="container-fluid">
  <div class="row">
    <div class="col-12 spaceBetweenFlex">
      <mat-form-field>
        <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Search:">
      </mat-form-field>
      <div>&nbsp;</div>
      <mat-paginator [pageSizeOptions]="[5, 10, 20]" showFirstLastButtons></mat-paginator>
    </div>
  </div>
</div>