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，并且正在处理这个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>

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

角度材料网格xs不工作

1 个答案: