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开发人员中非常常见。这是一个简单的演示，其中包含＆＃34;默认＆＃34; 行为（没有任何其他规则）和2个布局选项：column和row：

STACKBLITZ

Answer 2

您可能正在查看 css 样式display: block;将您要查看的内容更改为display: inline-block;

修改

现在你展示了一些代码。你的基本html很好，它显示了彼此相邻的输入。因此，在example-form或example-full-width类中出现问题。

Angular Material在同一行上有多个“输入”

2 个答案: