md-grid-list 响应属性在调整浏览器窗口大小时不起作用

Posted 2023-02-22

【中文标题】md-grid-list 响应属性在调整浏览器窗口大小时不起作用

【英文标题】：md-grid-list responsive attributes do not work upon resizing the browser window

【发布时间】：2017-10-09 00:24:57

【问题描述】：

我有包含卡片的 md-grid-list。我已将网格列表中的列数设置为 4。当我调整浏览器窗口的大小时，网格列表不会根据浏览器窗口调整大小，并且卡片中的内容会重叠并且看起来很难看。如何将网格列表设置为根据浏览器窗口大小动态显示？或者如何根据浏览器窗口大小设置网格中卡片的数量？

<md-grid-list cols="4" md-cols-sm="2" md-cols-md="4" md-cols-lg="8" md-cols-gt-lg="12"  rowHeight="250px" gutterSize="20px">
  <md-grid-tile  *ngFor="let data of myData">
      <md-card [style.background]="'lightBlue'" [style.minHeight]="'100%'" >    
    <md-card-title></md-card-title>
    <md-card-title></md-card-title>
    <md-card-content>
    <h2>    
    </h2>
    </md-card-content>  
    </md-card>
  </md-grid-tile>
</md-grid-list>

【问题讨论】：

你在使用 Angular 2 吗？

@ShrutiAgarwal 是的。我正在使用 Angular 2.4.10 版本

像 md-cols-sm 这样的指令对它无效。请查看此以获取更多详细信息：material.angular.io/components/component/grid-list

@ShrutiAgarwal 好的，谢谢。如果它们无效，哪些响应指令可与角度 2 中的网格一起用于屏幕大小调整？

我在下面的答案中提到了可能的选项。如果您有任何疑问，请告诉我。

【参考方案1】：

像 md-cols-sm 这样的指令对于您的角度版本的 md-grid-list 无效。请查看此内容以获取更多详细信息：Angular 2 md-grid-list

您可以通过角度（dzurico.com/angular-flex-layout，github.com/angular/flex-layout/wiki/Responsive-API）使用 flexbox 布局或编写自己的 css 类来实现 flexbox。

【讨论】：

谢谢。我尝试安装 flex 布局，但收到此错误消息。请你帮助我好吗 ？我使用 "npm install @angular/flex-layout" 安装了 flex 布局。安装后，我收到此打字稿错误消息。 "node_modules/@angular/core/index"' 没有导出成员 'Renderer2'。" "node_modules/@angular/core/index"' 没有导出成员 'InjectionToken'。"

安装flexbox后有没有报错？您能否按照此链接中的步骤再次尝试安装 flex 布局：alligator.io/angular/flex-layout

我发现最新版本的@angular/flex-layout 需要Angular v4.x 并且不会与来自此链接github.com/angular/flex-layout/blob/master/CHANGELOG.md的Angular v2.x 兼容

仍然可以导入使用。我将它与 Angular 2 一起使用。

很高兴知道它有效。您可以接受它作为帮助面临相同问题的其他人的答案。