当我在over模式下打开sidenav时，我看不到像sidenav example这样的灰色背景。如果我在sidenav外面点击它，它就不会关闭。
在我的项目中，md-container是内容的包装器，md-sidenav位于<div class="card">。
（在我的sidenav里面，我有一些时间表和一些笔记）
我正在使用棱角分明材料2.0.0-beta.11。
这段代码怎么了？
<at-sidenav-container>
<div class="main-content">
<mat-sidenav position="end" mode="over" #sidenav>
<div class="col-md-12">
<div class="card card-plain">
<div class="card-content custom-timeline">
<ul class="timeline timeline-simple">
<li class="timeline-inverted"
*ngFor="let note of ticketBundleNoteList">
<div class="timeline-badge success">
<i class="material-icons">description</i>
</div>
<div class="timeline-panel">
<div class="card-row">
<div class="card-row-content padding-right10">
<i class="material-icons">account_circle</i>
</div>
<div class="card-text card-row-content">
<div class="timeline-heading">
<h3>Nome</h3>
</div>
<div class="timeline-body">
<p>{{note.text}}</p>
</div>
</div>
</div>
<div class="card-footer">
<div class="stats">
<span> <i class="material-icons">update</i>
{{'cardfooter.inserteddate' | translate }} {{note.createdDate
| date :('pattern.datehourmin' | translate)}}
</span>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</mat-sidenav>
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<div class="card" *ngIf="selected">
<div class="card-header card-header-icon"
data-background-color="main-theme-color">
<i class="material-icons">work</i>
</div>
<div class="card-content">
<form #modelForm="ngForm">
<h3 class="card-title">{{
'ticketbundle.detail.titles.header' | translate }}</h3>
<div class="row">
<div class="col-md-4">
<div class="form-group label-floating">
<label class="control-label">
{{'ticketbundle.detail.labels.customer' | translate }}</label>
{{selected.customer.name}}
</div>
</div>
<div class="col-md-4">
<div class="form-group label-floating">
<label class="control-label">
{{'ticketbundle.detail.labels.city' | translate }}</label>
{{selected.customer.city}}
</div>
</div>
<div class="dropdown col-md-2 col-md-offset-2">
<button type="button"
class="btn btn-round btn-info dropdown-toggle pull-right"
data-toggle="dropdown">
<i class="material-icons">build</i> <span class="caret"></span>
</button>
<ul class="dropdown-menu dropdown-menu-right" role="menu">
<li><a href="javascript:void(0)">Audit log</a></li>
<li><a href="javascript:void(0)">Snapshot</a></li>
<li (click)="openSidebar()">Open sidenav</li>
</ul>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="form-group label-floating">
<label class="control-label">
{{'ticketbundle.detail.labels.landlinephone' | translate }}</label>
{{selected.customer.landlinePhone}}
</div>
</div>
<div class="col-md-4">
<div class="form-group label-floating">
<label class="control-label">
{{'ticketbundle.detail.labels.email' | translate }}</label>
{{selected.customer.email}}
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="form-group label-floating">
<label class="control-label">
{{'ticketbundle.detail.labels.from' | translate }}</label>
{{selected.startDate | date :('pattern.date' | translate )}}
</div>
</div>
<div class="col-md-4">
<div class="form-group label-floating">
<label class="control-label">
{{'ticketbundle.detail.labels.to' | translate }}</label>
{{selected.endDate | date :('pattern.date' | translate )}}
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<ul class="nav nav-pills nav-pills-info">
<li class="active"><a href="#ticketBundleRow"
data-toggle="tab">{{
'ticketbundle.detail.titles.ticketbundlerow' | translate }}</a></li>
<li><a href="#busRouteDetail" data-toggle="tab">{{
'ticketbundle.detail.titles.busroutedetail' | translate }}</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="ticketBundleRow">
<p-dataTable [value]="ticketBundleRowList"
sortField="fareTypeName" [responsive]="true"
resizableColumns="true" [sortOrder]="1" [immutable]="false"
reorderableColumns="true"> <p-column
field="fareTypeName"
header="{{ 'ticketbundle.detail.ticketbundlerows.table.labels.faretype' | translate }}"
[sortable]="true"></p-column> <p-column field="ticketQty"
[sortable]="true"
header="{{ 'ticketbundle.detail.ticketbundlerows.table.labels.ticketqty' | translate }}"></p-column>
<p-column field="unitPrice" [sortable]="true"
header="{{ 'ticketbundle.detail.ticketbundlerows.table.labels.unitPrice' | translate }}">
<ng-template let-col let-unitPrice="rowData" pTemplate="body">
<span> {{unitPrice[col.field] | currency:'EUR':true}}
</span> </ng-template></p-column> <p-column field="totalPrice" [sortable]="true"
header="{{ 'ticketbundle.detail.ticketbundlerows.table.labels.totalPrice' | translate }}">
<ng-template let-col let-amount="rowData" pTemplate="body">
<span> {{amount[col.field] | currency:'EUR':true}} </span> </ng-template></p-column></p-dataTable>
</div>
<div class="tab-pane" id="busRouteDetail">
<p-dataTable [value]="busRouteDetailList" sortField="name"
[responsive]="true" resizableColumns="true" [sortOrder]="1"
[immutable]="false" reorderableColumns="true">
<p-column field="name"
header="{{'ticketbundle.detail.busroutedetail.table.labels.buslinename' |
translate }}"
[sortable]="true"></p-column> <p-column field="stopName"
header="{{'ticketbundle.detail.busroutedetail.table.labels.busstop' |
translate }}"
[sortable]="true"></p-column> <p-column
header="{{'ticketbundle.detail.busroutedetail.table.labels.day' |
translate }}">
<ng-template let-day="rowData" pTemplate="body">
<span class="selectedDays" *ngIf="day.mon == true">{{
'weekday.mon' | translate}}</span> <span *ngIf="day.mon != true">{{
'weekday.mon' | translate}}</span> <span class="selectedDays"
*ngIf="day.tue == true">{{'weekday.tue' | translate
}}</span> <span *ngIf="day.tue != true">{{'weekday.tue' |
translate }}</span> <span class="selectedDays"
*ngIf="day.wed == true">{{'weekday.wed' | translate
}}</span> <span *ngIf="day.wed != true">{{'weekday.wed' |
translate }}</span> <span class="selectedDays"
*ngIf="day.thu == true">{{'weekday.thu' | translate
}}</span> <span *ngIf="day.thu != true">{{'weekday.thu' |
translate }}</span> <span class="selectedDays"
*ngIf="day.fri == true">{{'weekday.fri'| translate }}</span>
<span *ngIf="day.fri != true">{{'weekday.fri'|
translate }}</span> <span class="selectedDays"
*ngIf="day.sat == true">{{'weekday.sat'| translate }}</span>
<span *ngIf="day.sat != true">{{'weekday.sat'|
translate }}</span> <span class="selectedDays"
*ngIf="day.sun == true">{{'weekday.sun' | translate
}}</span> <span *ngIf="day.sun != true">{{'weekday.sun' |
translate }}</span> </ng-template></p-column> <p-column field="since"
header="{{'ticketbundle.detail.busroutedetail.table.labels.from' |
translate }}"
[sortable]="true"> <ng-template let-col
let-date="rowData" pTemplate="body"> <span>
{{date[col.field] | date :('ticketbundle.table.pattern.date'
| translate )}} </span> </ng-template></p-column> <p-column field="until"
header="{{'ticketbundle.detail.busroutedetail.table.labels.to' |
translate }}"
[sortable]="true"> <ng-template let-col
let-date="rowData" pTemplate="body"> <span>
{{date[col.field] | date :('ticketbundle.table.pattern.date'
| translate )}} </span> </ng-template></p-column></p-dataTable>
</div>
</div>
</div>
</div>
<br> <br>
<div class="row">
<div class="col-md-2">
<h3>{{ 'ticketbundle.detail.titles.payment' | translate }}</h3>
</div>
<div class="col-md-2 col-md-offset-8">
<button class="btn btn-info btn-round pull-right"
(click)="newPayments()" rel="tooltip" data-toggle="modal"
data-target="#paymentsModal"
title="{{'ticketbundle.detail.tooltips.add' |
translate }}">
<span class="btn-label"> <i class="material-icons">add</i>
</span>
</button>
</div>
</div>
<p-dataTable [value]="paymentList" sortField="createdDate"
[responsive]="true" resizableColumns="true" [sortOrder]="-1"
[immutable]="false" reorderableColumns="true"> <p-column
field="createdDate"
header="{{ 'ticketbundle.detail.payment.table.labels.createddate' | translate }}"
[sortable]="true"> <ng-template let-col
let-date="rowData" pTemplate="body"> <span>
{{date[col.field] | date :('pattern.datehourmin' | translate )}}
</span> </ng-template></p-column> <p-column field="currencyDate" [sortable]="true"
header="{{ 'ticketbundle.detail.payment.table.labels.currencydate' | translate }}">
<ng-template let-col let-date="rowData" pTemplate="body">
<span> {{date[col.field] | date :('pattern.date' |
translate )}} </span> </ng-template></p-column> <p-column field="amount" [sortable]="true"
header="{{ 'ticketbundle.detail.payment.table.labels.amount' | translate }}">
<ng-template let-col let-unitPrice="rowData" pTemplate="body">
<span> {{unitPrice[col.field] | currency:'EUR':true}} </span> </ng-template></p-column> <p-column
styleClass="col-button"> <ng-template
let-model="rowData" pTemplate="body">
<div class="text-center">
<button class="btn btn-simple btn-danger btn-icon remove"
rel="tooltip" (click)="delete(model._links.self.href)"
title="{{'ticketbundle.table.tooltips.delete' | translate }}"
data-placement="left">
<i class="material-icons">close</i>
</button>
</div>
</ng-template> </p-column> </p-dataTable>
<div class="row">
<div class="col-md-6">
<div class="form-group label-floating">
<md-form-field> <textarea mdInput
placeholder="{{ 'ticketbundle.detail.labels.note' | translate }}"
rows="4" name="notes" #note></textarea> </md-form-field>
</div>
</div>
</div>
</form>
<br> <br> <br>
<div class="card-footer">
<app-card-footer-cmp [selected]="selected"></app-card-footer-cmp>
</div>
</div>
<!--card content-->
</div>
<!--card -->
</div>
<!-- md 8 -->
<!-- row -->
</div>
</div>
<!-- container-fluid -->
</div>
<!-- main-content --> </mat-sidenav-container>
<div class="modal fade" id="paymentsModal" tabindex="-1" role="dialog"
aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content" *ngIf="payment">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"
aria-hidden="true">
<i class="material-icons">clear</i>
</button>
<h4 class="modal-title">{{'ticketbundle.detail.payment.dialog.title'
| translate }}</h4>
</div>
<form #rowForm="ngForm">
<div class="modal-body">
<div class="row">
<div class="col-md-6">
<md-form-field> <input mdInput [min]="minDate"
(click)="Picker.open()" [max]="maxDate"
[(ngModel)]="currencyDate" name="currencyDate"
[mdDatepicker]="Picker" required
placeholder="{{ 'ticketbundle.detail.labels.from' | translate }}">
<md-datepicker-toggle mdSuffix [for]="Picker"></md-datepicker-toggle>
<md-datepicker #Picker></md-datepicker> </md-form-field>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="form-group label-floating">
<md-select required
placeholder="{{ 'ticketbundle.detail.payment.dialog.labels.paymenttype' | translate }}"
[(ngModel)]="payment.paymentType" name="paymentType">
<md-option *ngFor="let payment of payments"
[value]="payment.value"> {{ payment.label }} </md-option> </md-select>
</div>
</div>
<div class="col-md-4">
<div class="input-group">
<span class="input-group-addon"> <i
class="material-icons">euro_symbol</i>
</span>
<div class="form-group label-floating">
<label class="control-label">{{
'ticketbundle.detail.payment.dialog.labels.amount' | translate
}}<span class="star">*</span>
</label> <input [(ngModel)]="payment.amount" pattern="\d+(\.\d{1,2})?"
required class="form-control" id="amount" name="amount">
</div>
</div>
</div>
</div>
<div class="row"></div>
<br>
<div class="row">
<div class="category form-category">
<span class="star">*</span> {{ 'form.requiredfields' | translate
}}
</div>
</div>
</div>
<div class="modal-footer">
<span>
<button type="button" class="btn btn-info btn-round"
(click)="save()" data-dismiss="modal"
[disabled]="rowForm.form.invalid || rowForm.form.pristine">
<span class="btn-label"> <i class="material-icons">check</i>
</span>{{'ticketbundle.detail.payment.dialog.save' | translate }}
</button>
</span> <span>
<button type="button" class="btn btn-round" data-dismiss="modal">
{{'ticketbundle.detail.payment.dialog.close' | translate }}</button>
</span>
</div>
</form>
</div>
</div>
</div>