"angular-flex-layout" 未在移动设备屏幕上为 "mat-form-fields" 添加边距

Question

我使用 angular material 和 flex-layout 创建了一个响应式表单。它在桌面和 ipad 屏幕上运行良好。

对于移动设备，我想将表单域居中对齐并在屏幕左右添加边距。有没有办法在 flex-layout 中做到这一点？

如果不是，如何使用 ngClass.xs 自定义 CSS 来完成？我试过将宽度设置为 90%，但它没有正确居中并且看起来很奇怪。

<div class="container" fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="2%" fxLayoutAlign="center">

  <mat-form-field appearance="standard" fxFlex="22%" fxFlex.xs="90%">
    <mat-label>Field 1</mat-label>
    <input matInput placeholder="Field 1">
    <mat-icon matSuffix>place</mat-icon>
  </mat-form-field>

  <mat-form-field appearance="standard" fxFlex="22%" fxFlex.xs="90%">
    <mat-label>Field 2</mat-label>
    <input matInput placeholder="Field 2">
    <mat-icon matSuffix>business</mat-icon>
  </mat-form-field>

  <mat-form-field appearance="standard" fxFlex="22%" fxFlex.xs="90%">
    <mat-label>Field 3</mat-label>
    <input matInput placeholder="Field 3">
    <mat-icon matSuffix>send</mat-icon>
  </mat-form-field>

  <mat-form-field appearance="standard" fxFlex="22%" fxFlex.xs="90%">
    <mat-label>Field 4</mat-label>
    <input matInput placeholder="Field 4">
  </mat-form-field>

</div>

Answer 1

最简单和最方便的是在弹性容器

上设置ngClass.xs

<div class="container" fxLayout="row" fxLayout.xs="column" 
     fxLayoutGap.gt-xs="2%"  fxLayoutAlign="center" ngClass.xs="mobileContainer">

其中 .mobileContainer 是

.mobileContainer mat-form-field {
  margin: 8px 16px;
}

这里有一个简单的演示https://stackblitz.com/edit/angular-dufpaa

作为旁注；

您不需要 mat-form-field 元素上的 fxFlex.xs="90%"，因为 fxLayout.xs="column" 容器在 xs 屏幕上有列布局，而 fxFlex.xs="90%" 意味着 "take 90% of parents' height" 在列布局上。因为 flex-shrink 默认为 1 这没有任何效果。

Answer 2

<div class="container" fxLayout="row" fxLayout.xs="column" fxLayoutGap="20px" fxLayoutAlign="center">

  <mat-form-field appearance="standard" fxFlex="22%" fxFlex.xs="90%">
    <mat-label>Field 1</mat-label>
    <input matInput placeholder="Field 1">
    <mat-icon matSuffix>place</mat-icon>
  </mat-form-field>

  <mat-form-field appearance="standard" fxFlex="22%" fxFlex.xs="90%">
    <mat-label>Field 2</mat-label>
    <input matInput placeholder="Field 2">
    <mat-icon matSuffix>business</mat-icon>
  </mat-form-field>

  <mat-form-field appearance="standard" fxFlex="22%" fxFlex.xs="90%">
    <mat-label>Field 3</mat-label>
    <input matInput placeholder="Field 3">
    <mat-icon matSuffix>send</mat-icon>
  </mat-form-field>

  <mat-form-field appearance="standard" fxFlex="22%" fxFlex.xs="90%">
    <mat-label>Field 4</mat-label>
    <input matInput placeholder="Field 4">
  </mat-form-field>

</div>

将 fxLayoutGap.gt-xs="2%" 更改为 fxLayoutGap="20px"。

"angular-flex-layout" 未在移动设备屏幕上为 "mat-form-fields" 添加边距

"angular-flex-layout" not adding margin for "mat-form-fields" on mobile screens

css

angular

angular-flex-layout

angular-material-7