Css &引用；“角度弯曲布局”；不为“添加保证金”；mat form字段“；在移动屏幕上

我已经创建了一个响应形式使用角材料和弹性布局。 它在桌面和ipad屏幕上运行良好

对于移动设备，我希望将表单字段与中心对齐，并在屏幕的左右两侧添加边距。在flex布局中是否有这样做的方法

如果没有，如何使用自定义CSS使用

ngClass.xs

？我试着将宽度设置为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>

字段1
地方
字段2
商业
字段3
发送
字段4

最简单、最方便的方法是在flex容器上设置

其中

.mobileContainer

为

.mobileContainer mat表单字段{
利润率：8px 16px；
}

这里是一个简单的演示

作为旁注

由于

fxLayout.xs=“column”

容器在

xs

屏幕上有列布局，

fxFlex.xs=“90%”在
mat表单字段上不需要
。由于
flex-shrink
默认为
1
，因此不会产生任何效果。

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

字段1
地方
字段2
商业
字段3
发送
字段4

将fxLayoutGap.gt xs=“2%”更改为fxLayoutGap=“20px”
 谢谢，这个很好用。如果将
fxLayoutGap.gt xs=“2%”
自动应用于移动屏幕，那就太好了。我很高兴它起到了作用
fxLayoutGap.gt xs
表示“屏幕大于xs”。如果您希望它也应用于
xs
屏幕，那么只需删除响应选择器并将其用作
fxLayoutGap=“2%”
我的意思是，如果它自动添加
左边距
和
右边距
，那就太好了。而不是用CSS做这个黑客。对不起，我弄错了
fxLayoutGap
是弹性项目之间的间距。因此，使用
fxLayoutGap
无法实现您想要的功能。我的意思是，
ngClass.xs
的问题不是黑客，而是如何做到这一点。