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

Question

我有包含卡片的 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>

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