角2材料不调整或调整用于移动/更小的宽度

Question

我使用角2物质为具有基本的Navbar设置位置：

<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现场调整大小（对于移动，或小包装在桌面上），它是在这里看到调整罚款：

但当矿重新排列的按钮简单地被推出来屏幕视图：

我在这样的假设之下，即只使用材料项目，页面会自动响应，就像使用引导元素一样。 或者我需要创建代码来做angular.io（IE页面的宽度和调整时，它的房间外）类似的事情，如果我不得不创建代码是有简化的方式做检查是否工具栏中的项目不适合屏幕？谢谢

Answer 1

所以我完全忘了'flex-layout'，只要我把正确的调用放到函数中，它就会自动完成所有这些。

这里是Flex和角材料响应导航栏的runthrough：https://dev-plaza.com/responsive-navbar-mit-angular-flex-layout-und-angular-material

，这里是柔性布局：https://github.com/angular/flex-layout

这里总算是Flexbox的文档：http://cssreference.io/flexbox/