css - Angular Material - 简单的登录表单

Question

我是使用 Angular Material 进行样式设置的新手（我通常会使用引导程序），并且我正在构建一个非常简单的响应式登录框。我已经能够根据我在网上找到的示例将它放在一起，它看起来像这样：

它使用带有 flex 布局的 mat-card。在上面的示例中，我使用 CSS 在文本框的左侧显示 mat-icons，如下所示：

HTML

<mat-card>
    <mat-card-title>Login</mat-card-title>
    <mat-card-content>
      <form [formGroup]="form" (ngSubmit)="submit()">

        <p>
          <mat-icon mat-list-icon>mail_outline</mat-icon>
          <mat-form-field>
            <input
              type="text"
              matInput
              placeholder="Username"
              formControlName="username"
              required
            />
            <mat-error>
              Please provide a valid email address
            </mat-error>
          </mat-form-field>
        </p>

        ...

      </form>
    </mat-card-content>
</mat-card>

CSS

  :host {
    display: flex;
    justify-content: center;
    margin: 100px 0px;
  }

  .mat-form-field {
    min-width: 300px;
    margin-right: 10px;
    margin-left: 10px;
  }

  mat-card-title,
  mat-card-content {
    display: flex;
    justify-content: center;
  }

  mat-icon {
    float: left;
    opacity: 0.5;
    margin-top: 14px;
  }

这是 StackBlitz 上的一个示例：https ://angular-material-login-form-ktnizs.stackblitz.io

我的问题是 - 当屏幕很窄时，图标（设置为向左浮动）换行，我想将它们保持在顶部图像所示的位置。

这是否可以使用 Material 类而无需编写自定义 css？

标签： cssangularresponsive-designangular-materialstyling