获取Angular Material Mat-Toolbar以相等的行距填充整个行和标题名称

时间:2019-06-14 19:08:33

标签: css angular material

我在使用flexfx的棱角材质中添加了一个mat-toolbar标头。我有3个标题名称,但是mat-toolbar不能完全填充mat-card的宽度。垫工具栏约占垫卡宽度的70%。

我正在尝试使席卡填充宽度的100%,并使3个标头名称中的每一个均等距隔开。

感谢您的帮助。

  <mat-card>

      <mat-card-content>

          <div fxLayout='row'>
            <div class="ng-container" width="100%"  *ngFor="let header of headers">


              <div fxLayout="row" fxFlex >
                <div fxLayout="column" fxFlex>
                  <mat-toolbar fxLayoutAlign="end" class="my-mat-tool-bar"><span><strong>{{header}}</strong></span></mat-toolbar>
                </div>
              </div>
            </div>
          </div>
</mat-card-content>
</mat-card>

在我的scss文件中

 .my-mat-tool-bar {
    height:  30px !important;
    background-color: grey;
    min-height: 30px !important;
  }

0 个答案:

没有答案