Css 角度2材料不调整尺寸或调整移动/较小宽度

我在这里使用Angular 2材质进行基本导航栏设置：

<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>

菜单
{{this.title}}
问询处
工具
博客

调整angular.io站点的大小（适用于移动设备或桌面上的小软件包）时，它会调整得很好，如下所示：

但是，当我的按钮被重新排列时，按钮就会被从屏幕视图中推出：

我的假设是，只要使用材料项，页面就会自动响应，就像使用引导元素一样。

---

或者，我是否需要创建代码来执行angular.io上的类似操作（即检查页面宽度，并在页面不在房间时进行调整），如果我必须创建代码，是否有流线型方法，请检查工具栏中的项目是否与屏幕不符？谢谢

所以我完全忘记了“flex layout”，只要我对函数进行了正确的调用，“flex layout”就会自动完成所有这一切

以下是一个具有弹性和角度材料的响应导航栏的演示：

这里是flex布局：

---

最后是flexbox文档：

通常不需要-您需要使用响应性技术设计完整的站点，以使其适应不同的设备/宽度此插件由您的代码片段制作，具有响应性：。你对你的代码做了修改吗？@faboolous有关于这方面的教程吗，只是用CSS来检测宽度和调整吗？我是否使用typescript/javascript获取宽度并进行调整？@Vega不响应tho？当你将工具栏移入时，按钮会隐藏起来，我希望这些按钮能够调整，或者在出现这种情况时，它们会变成一个下拉列表。请注意，我正在使用引导SCS来调整我的文本值！