Angular Material 多个 "input"在同一行

Question

如何在同一行添加多个输入？我试过使用 bootstrap 但由于某种原因它不会工作。如果你有一些例子可以给我看。

<form class="example-form">
  <mat-form-field class="example-full-width">
    <input matInput placeholder="First Name">
  </mat-form-field>

  <mat-form-field class="example-full-width">
    <input matInput placeholder="Last Name">
  </mat-form-field>
</form>

Answer 1

Angular Material 的输入默认按行显示(请参阅下面的 stackblitz)，并且您可能会在项目的某处覆盖此行为，我的意思是 CSS 规则。如果你喜欢 Flexbox，可以使用 @angular/flex-layout ，您可以轻松地控制如何显示项目:在行中或在列中，这个包在 Angular 开发人员中很常见。这是一个简单的演示，具有“默认” 行为(没有任何附加规则)和 2 个布局选项:column 和 row:

STACKBLITZ