在Angular中如何通过Bootstrap类拉伸mat-form-field组件

原因说明 #

mat-form-field 组件默认内置了最小宽度限制，且未设置自适应填充父容器宽度的属性，因此套入 Bootstrap 的 flex 容器中不会自动分配宽度。

解决方案 #

方案1：基于Flex布局实现

修改HTML结构如下，给每个mat-form-field添加flex-grow-1类自动分配flex容器宽度：

<div class="col-lg-3 d-flex align-self-lg-stretch gap-2">
  <mat-form-field appearance="outline" class="flex-grow-1">
    <input matInput formControlName="houseNum">
  </mat-form-field>

  <mat-form-field appearance="outline" class="flex-grow-1">
    <input matInput formControlName="entranceNum">
  </mat-form-field>
</div>

在组件样式中添加如下规则，让mat-form-field撑满分配到的容器空间：

mat-form-field {
  width: 100%;
}

方案2：基于Bootstrap栅格实现

直接用Bootstrap栅格系统给两个输入框各分配50%宽度，不需要额外flex配置：

<div class="col-lg-3 row g-2 m-0">
  <mat-form-field appearance="outline" class="col-6 p-0">
    <input matInput formControlName="houseNum">
  </mat-form-field>

  <mat-form-field appearance="outline" class="col-6 p-0">
    <input matInput formControlName="entranceNum">
  </mat-form-field>
</div>

注意事项 #

• 如不需要两个输入框之间的间距，可删除代码中的gap-2、g-2类。
• 如全局设置mat-form-field { width: 100% }会影响其他页面的组件样式，可给外层容器添加自定义类名做样式限定，避免全局污染。

内容的提问来源于stack exchange，提问作者user1012506