角材料网格 xs 不工作答案

【问题标题】：angular material grid xs not working角材料网格 xs 不工作
【发布时间】：2017-08-27 03:21:27
【问题描述】：

<md-grid-list md-cols-lg="4" md-cols-sm="2" md-cols-xs="1" md-cols-md="2" md-gutter="3em" md-row-height='250px'>
       <md-grid-tile><div>one</div></md-grid-tile>
       <md-grid-tile><div>two</div></md-grid-tile>
       <md-grid-tile> <div>three</div> </md-grid-tile>
       <md-grid-tile>  <div>four</div></md-grid-tile>
 </md-grid-list>

这在 sm 、 md 和 lg 中运行良好，但在 xs（超小型设备）中无法运行

【问题讨论】：

它不起作用怎么办？
一旦它到达断点，它不会变成一列它只剩下两列，控制台中出现一些错误

标签： angularjs html css angularjs-material

【解决方案1】：

好吧，我已经粘贴了你的 html，它正在处理这个 codepen

<div ng-controller="AppCtrl" ng-app="MyApp">
   <md-grid-list md-cols-lg="4" md-cols-sm="2" md-cols-xs="1" md-cols-md="2" md-gutter="3em" md-row-height='250px'>
      <md-grid-tile><div>one</div></md-grid-tile>
      <md-grid-tile><div>two</div></md-grid-tile>
      <md-grid-tile> <div>three</div> </md-grid-tile>
      <md-grid-tile>  <div>four</div></md-grid-tile>
   </md-grid-list>
</div>

你遇到了什么错误？

更新

由于 Material 严格寻找 md-cols 属性，您需要将 md-cols="[col number you want]" 定义为默认值，然后使用查询定义来更改值。如：

   <md-grid-list md-cols="4" md-cols-sm="2" md-cols-xs="1" md-cols-md="2">
   </md-grid-list>

请注意，此默认值将影响查询未涵盖的所有屏幕尺寸。

【讨论】：

可能未处理的拒绝：md-grid-list: md-cols 属性未找到，或包含非数字值，这是我遇到的错误
然后只需将md-cols-xs="1" 更改为md-cols="1"，或任何一种媒体查询定义，但只有一个。