Angular 引导-使一个文本框比其他文本框长

我的页面上有三个文本框。我想使一个文本框比其他文本框大。我尝试编写以下代码：

<div class="row">
      <div class="col-md-3">
          <mat-form-field (keydown.enter)="$event.preventDefault()">
              <input matInput placeholder="Last Name"  >
          </mat-form-field>
          <mat-error >Required</mat-error>
      </div>

      <div class="col-md-3">
          <mat-form-field (keydown.enter)="$event.preventDefault()">
              <input matInput placeholder="First Name" >
          </mat-form-field>
          <mat-error >Required</mat-error>
      </div>

      <div class="col-md-8">

        <mat-form-field (keydown.enter)="$event.preventDefault()">
            <input matInput placeholder="E-mail"  >
        </mat-form-field>
        <mat-error >Required</mat-error>
    </div>


  </div>

要求的
要求的
要求的

我希望电子邮件文本框变得更大/更长。我试着把col-md-8放进去。如果我这样做，那么文本框将移动到下一行。我希望所有三个文本框都在同一行上

以下是该页面的图像：

当我将第一个文本框更改为col-md-2，将第二个文本框更改为col-md-2，将第三个文本框更改为col-md-8时，文本框移动到另一行。下图：

---

总列数最多为12列，因此，如果你想最后列8列，那么就让其他列2列

<div class="row">
      <div class="col-md-2 col-sm-2">
          <mat-form-field (keydown.enter)="$event.preventDefault()">
              <input matInput placeholder="Last Name"  >
          </mat-form-field>
          <mat-error >Required</mat-error>
      </div>

      <div class="col-md-2 col-sm-2">
          <mat-form-field (keydown.enter)="$event.preventDefault()">
              <input matInput placeholder="First Name" >
          </mat-form-field>
          <mat-error >Required</mat-error>
      </div>

      <div class="col-md-8 col-sm-8">

        <mat-form-field (keydown.enter)="$event.preventDefault()">
            <input matInput placeholder="E-mail"  >
        </mat-form-field>
        <mat-error >Required</mat-error>
    </div>


  </div>

要求的
要求的
要求的

顶部列的总数必须是12，所以我按照您告诉我的方式做了2-2-8，电子邮件文本框移到了另一行。我把上面的图片贴在我原来的帖子里。然后你也应该设置col-sm-2 col-sm-2 col-sm-8。对于较小的设备大小，bootsrap自动更改其大小