角度材料导航栏没有响应性
角度材料导航栏没有响应性
提问于 2018-08-15 11:12:40
我找遍了所有地方，但似乎找不到答案，所以在这里发帖。
我有一个使用mat-toolbar的nav bar。它适用于任何平板电脑大小或更大的屏幕，但当nav bar不适合屏幕时，不适合的部分就无法显示。我尝试过使用bootstrap来解决这个问题，但是没有任何成功的机会。这是一个指向repo stackblitz.com/github/jearl4/portfolio的stackblitz链接。导航条形码在app->app.component.html文件中
这是我的导航条形码：
<nav class="navbar navbar-toggleable-xs">
<mat-toolbar color="primary">
<mat-toolbar-row>
<h1>J.T. Earl</h1>
<span class="navbar-spacer"></span>
<button mat-button routerLink="/home">
<mat-icon>home</mat-icon>
</button>
<button mat-button routerLink="/about" routerLinkActive="active">About</button>
<button mat-button>Services</button>
<button mat-button>Contact</button>
<button mat-button routerLink="/capm">Capm</button>
</mat-toolbar-row>
</mat-toolbar>
</nav>
<!-- routed view goes here -->
<router-outlet></router-outlet>和我的css：
.navbar-spacer {
flex: 1 1 auto;
}
.header {
min-width: 319px;
width: 100%;
flex-shrink: 0;
flex-grow: 0;
}我尝试了Create a Responsive Toolbar using Angular Material的解决方案，但这并没有解决我的问题。这篇文章是关于响应式导航栏的，虽然让导航栏响应式可能涉及到解决我的问题，但这并不是我试图解决的问题。相反，我只是试图修复中断的问题，解决方案不需要涉及响应式设计，尽管这将是受欢迎的。
回答 1
Stack Overflow用户
回答已采纳
发布于 2018-10-20 02:22:22
我不得不改变我的导航风格，从严格的水平布局到水平，在小屏幕上有一个垂直的侧面导航，但这段代码就是我解决问题的方法。
<nav class="navbar navbar-toggleable-xs">
<mat-toolbar color="primary">
<div fxShow="true" fxHide.gt-sm="true">
<button mat-icon-button (click)="sidenav.toggle()">
<mat-icon>menu</mat-icon>
</button>
</div>
<h1>title</h1>
<span class="navbar-spacer"></span>
<div fxShow="true" fxHide.lt-md="true">
<button mat-button routerLink="/home">
<mat-icon>home</mat-icon>
</button>
<button mat-button routerLink="/about" routerLinkActive="active">About</button>
<button mat-button routerLink="/capm">Capm</button>
</div>
</mat-toolbar>
<mat-sidenav-container fxFlexFill class="example-container">
<mat-sidenav color="primary" #sidenav fxLayout="column" mode="over" opened="false" fxHide.gt-sm="true">
<div fxLayout="column">
<button mat-button routerLink="/home">
<mat-icon>home</mat-icon>
</button>
<button mat-button routerLink="/about" routerLinkActive="active">About</button>
<button mat-button routerLink="/capm">Capm</button>
</div>
</mat-sidenav>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51852452
复制相关文章
相似问题
腾讯云开发者
