角度2材料未调整大小或调整移动/更小的宽度

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网站调整大小时（对于移动设备或桌面上的小包装），它会调整得很好，如下所示：

但是当重新安排我的按钮时，按钮就会被挤出屏幕视图：

我假设只使用材料项，页面会自动响应，就像使用bootstrap元素一样。 或者我是否需要创建代码来执行类似于angular.io（IE检查页面的宽度并调整其外出时间）的内容，如果我必须创建代码，则有简化的方法来检查是否有项目在工具栏中不适合屏幕？感谢

Answer 1

所以我完全忘了＆＃39; flex-layout＆＃39;只要我对函数进行正确的调用，它就会自动完成所有这些操作。

以下是具有弹性和角度材质的响应式导航栏的粗略内容：https://dev-plaza.com/responsive-navbar-mit-angular-flex-layout-und-angular-material

这里是flex-layout：https://github.com/angular/flex-layout

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