角度材料网格 XS不起作用

Question

<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(超小型设备(中不起作用

Answer 1

好吧，

我已经粘贴了您的html，它正在处理此代码笔

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

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