我正在使用 “@angular2-material/sidenav”:“2.0.0-alpha.6-2”,并且我有引导菜单,我想在移动设备中切换到 md-slidenav,所以我能够隐藏我的引导菜单屏幕小于 768 像素并显示我的 md -slidenav 但它以某种方式继承了菜单高度并且不显示整个屏幕。
<nav id="main-menu" class="navbar navbar-default switch" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"
aria-expanded="true">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar top-bar"></span>
<span class="icon-bar middle-bar"></span>
<span class="icon-bar bottom-bar"></span>
</button>
<a class="navbar-brand" [routerLink]="['/home']">
<img class="logo" src="{{imgPath}}" />
</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav pull-right pull oa-nav">
<li>
<a href="http://www.google.com">
<span class="list-land">
link
</span>
</a>
</li>
<li>
<a [routerLink]="['/link']">link</a>
</li>
<li>
<a [routerLink]="['/user/sign-in']">Login</a>
</li>
<li>
<a type="button" class="btn btn-primary join-now" style=" margin-top: 0px; margin-left: 8px; " [routerLink]="['/user/signup']">link</a>
</li>
<li>
<a href="javascript:void(0);" class="dropdown-toggle" data-toggle="dropdown">About Us</a>
<ul class="dropdown-menu dropdown-menu-right">
<li>
<a data-toggle="collapse" data-target=".navbar-collapse" [routerLink]="['/aboutus/welcome']">Welcome Letter</a>
</li>
<li>
<a data-toggle="collapse" data-target=".navbar-collapse" [routerLink]="['/aboutus/news']">News</a>
</li>
<li>
<a data-toggle="collapse" data-target=".navbar-collapse" [routerLink]="['/aboutus/help']">Help</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
<md-sidenav-layout >
<div class="left-menu">
<button class="hamburger" (click)="left.toggle()">
<span></span>
<span></span>
<span></span>
</button>
</div>
<md-sidenav class="md-sidenav tab-toggle" #left (open)="mybutton.focus()" mode="over" layout-padding>
<button #mybutton (click)="left.close()" class="btn" style="right:20px;top:10px;
position:absolute;
padding: 0px 4px;
border-radius: 10px;
border-color:#fff;">
<i class="fa fa-times fa-2x" style="color:#009688;" aria-hidden="true"></i>
</button>
<div>
<ul class="list-item">
<li>
<a [routerLink]="['/profile/my-excursions']">My Trips</a>
</li>
<li>
<a [routerLink]="['/profile']">Profile</a>
</li>
<li>
<a [routerLink]="['/profile/membership']">Membership</a>
</li>
<li *ngIf="userService.isMember">
<a [routerLink]="['/profile/background-check']">Background Check</a>
</li>
<li>
<a [routerLink]="['/user/change-password']">Password</a>
</li>
<li>
<a (click)="logOut()">Logout</a>
</li>
</ul> </div>
</md-sidenav>
</md-sidenav-layout>
我也尝试将全屏指令添加到 md-slide-layout 标记,但它也不起作用