css - Angular 2 Material不调整大小或调整移动/较小宽度

Question

我在这里使用 Angular 2 Material 进行基本的导航栏设置:

<mat-toolbar color="primary" class="mat-elevation-z2">
  <button mat-icon-button (click)="openSideNav()">
     <mat-icon class="md-24" >menu</mat-icon>
  </button>
  <span>{{this.title}}</span>
  <button mat-button [matMenuTriggerFor]="infoMenu">Information</button>
  <button mat-button [matMenuTriggerFor]="toolsMenu">Tools</button>
  <button mat-button>Blog</button>
  <span class="fill-space"></span>
  <!-- Pull right -->
  <div class="float-right">
    <button mat-icon-button>
      <li class="fa fa-user-circle fa-2x"></li>
    </button>
  </div>
</mat-toolbar>

当调整 angular.io 站点的大小时(对于移动设备或桌面上的小包)，它会调整得很好，如下所示:

但是当我的按钮被重新排列时，按钮只是被推出屏幕 View :

我的假设是仅使用 Material 项，页面就会自动响应，就像使用 Bootstrap 元素一样。或者我是否需要创建代码来执行与在 angular.io 上看到的类似的事情(即检查页面宽度并在空间不足时进行调整)，如果我必须创建代码是否有简化的方法来检查元素在工具栏中不适合屏幕？谢谢

Answer 1

所以我完全忘记了“flex-layout”，只要我对函数进行正确的调用，它就会自动执行所有这些操作。

以下是使用柔性和 Angular Material 的响应式导航栏的运行:https://dev-plaza.com/responsive-navbar-mit-angular-flex-layout-und-angular-material

这是 flex 布局:https://github.com/angular/flex-layout

最后是 flexbox 文档:http://cssreference.io/flexbox/