각 재료 그리드 이것은 SM, MD와 LG에서 잘 작동

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> 

작동하지 않습니다하지만 XS (매우 작은 장치) 작동하지 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> 

무엇이 오류입니까?

업데이트 재료부터

엄격 MD-COLS를 찾고은 기본적으로 md-cols="[col number you want]"를 정의하고 값을 변경하는 쿼리 definitons를 사용해야 때문이다. 예 :

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

이 기본값은 검색어로 다루지 않는 모든 화면 크기에 영향을 미칩니다.