如何更改角材料中垫卡的大小

Question

我希望两个组件具有相同的高度（左侧表单的大小）尝试使用边距，填充无效

下面是其父元素 HTML 的代码

<mat-tab label="Update Profile">

    <div class="container">
      <mat-card class="mat-card-container">
      <div class="vertical-center row" >

        <div class="col-lg-1">
        </div>

        <div class="col-lg-6">
          <app-register [user]="user"></app-register>
        </div>

        <div class="col-lg-4 password-change-form">
          <app-password-change [id]="user.id"></app-password-change>
        </div>



        <div class="col-lg-1">
        </div>

      </div>
      </mat-card>
    </div>
  </mat-tab>

CSS

.vertical-center {
  margin-top: 2rem;
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
}
.password-change-form{
  padding: inherit;
}
.spacer{}

Answer 1

你最好使用flex layout。参考：[https://github.com/angular/flex-layout/wiki/fxLayoutAlign-API][1]

设置fxFlexAlign="stretch" 使所有垫卡高度相同。

Answer 2

问题不在于 mat 卡，而在于带有密码更改形式的 div，如果您要求使它们具有相同的高度：

.password-change-form{
   height:100%
}

但如果您希望它们具有相同的宽度，您可能应该将 col-lg-5 添加到它们而不是 6 和 4

    <div class="col-lg-5">
      <app-register [user]="user"></app-register>
    </div>

    <div class="col-lg-5 password-change-form">
      <app-password-change [id]="user.id"></app-password-change>
    </div>