角钢不收缩主要内容

Question

我有一个容器，其中有两个sidenav和两个表。如果我切换左侧sidenav，则将表推到右侧，就好像使用mode =“ push”一样，但是我在此sidenav中使用mode =“ side”。此处的正确行为是缩小内容以为sidenav腾出空间。

  

https://material.angular.io/components/sidenav/overview#changing-the-sidenav-39-s-behavior

我发现，如果切换打开的sidenav，表格的左边距为350px，但是表格的宽度（1870px）不变（这对于mode =“ side”来说是正确的行为）：

我该如何解决？

HTML：

<mat-sidenav-container id="grid-container" class="grid-container">
 <mat-sidenav class="sidenavSearch" id="sidenavSearch" #sidenavSearch [opened]="false" mode="side" position="start">
  <app-patient-search [requestEnabled]="requestEnabled" (requestClick)="request()"></app-patient-search>
  <!-- removed for now  <app-history></app-history> -->
 </mat-sidenav>
 <mat-sidenav-content id="result" class="result">
  <div class="toggleSearch">
   <button class="toggleSearch" id="toggleSearch" mat-button (click)="sidenavSearch.toggle()"><mat-icon>search</mat-icon></button>
  </div>
  <div>
   <div class="title mat-headline padding" i18n="@@search:request:result">
    Result

   <!-- some tables -->
   </div>
  </div>
<div>
  <button class="toggleOptions" id="toggleOptions" mat-button (click)="sidenavOptions.toggle()"><mat-icon>settings</mat-icon></button>
</div>
 </mat-sidenav-content>
 <mat-sidenav class="sidenavOptions" id="sidenavOptions" #sidenavOptions [opened]="true" mode="over" position="end">
  <app-options></app-options>
 </mat-sidenav>
</mat-sidenav-container>

CSS：

.grid-container {
  display: grid;
  grid-template-columns: [searchToggle]25px [result]auto [optionsToggle]25px [end];
  width: 100%;
}

.toggleSearch {
  grid-column-start: searchToggle;
  grid-column-end: result;
  justify-self: end;
}

.teest {
  width: 25px;
}

.result {
  grid-column-start: result;
  grid-column-end: optionsToggle;
  width: 100%;
}

.toggleOptions {
  grid-column-start: optionsToggle;
  grid-column-end: end;
  justify-self: center;
  position: absolute;
}

.table-container:not(:last-child) {
  margin-bottom: 20px;
}

.title {
  align-items: center;
  background-color: #315A9A;
  color: white;
}

.table-title {
  background-color: #8d8d8d;
  color: white;
}

.padding {
  padding-left: 20px;
  padding-right: 20px;
}

#sidenavOptions {
  border-left: 1px solid black;
  box-shadow: 1px 0 2px grey;
  width: 250px;
}

#sidenavSearch {
  border-right: 1px solid black;
  box-shadow: 1px 0 2px grey;
  width: 350px;
}

Answer 1

在您的表中使用引导类，即表响应型。这样可以解决您的问题。

<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>