在这里,我使用的是 Angular-Material
,我的环境是:Angular CLI: 6.0.5
,Node: 10.1.0
, OS: win32 x64
, Angular: 6.0.3
我想要这样的输出:
为了实现完全相同的顶部导航栏,我有如下 mat-toolbar
:
在 .html 中
<mat-toolbar class="topbar telative mat-toolbar mat-primary mat-toolbar-single-row" color="primary" ng-reflect-color="primary" style="flex-direction: row; box-sizing: border-box; display: flex;position: fixed;" [class.mat-elevation-z24]="isActive">
<button mat-icon-button (click)="snav.toggle()"><mat-icon>menu</mat-icon>
</button>
<h1 class="example-app-name">Admin Panel</h1>
</mat-toolbar>
在 .ts 中
我只有一个 isActive 属性
isActive = true;
我的输出绝对没问题,但是 mat-toolbar
没有覆盖整个屏幕宽度,因此垂直滚动条出现在 mat-toolbar
的一侧>。我想要在我的 mat-toolbar
下方有滚动条,如上图所示。如何将 mat-toolbar
的宽度设置为全屏。
最佳答案
要将 mat-toolbar
宽度设置为 100%,您可以在您的 css 文件中执行类似的操作
.fixed-header {
position: fixed;
top: 0;
left: 0;
z-index: 2;
width: 100% !important;
}
关于css - 如何设计屏幕的mat-toolbar全宽,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51058232/