md-grid-list響應屬性在調整瀏覽器窗口大小時不起作用

我有包含卡片的md-grid-list。我已經將網格列表中的列數設置爲4。當我調整瀏覽器窗口的大小時，網格列表將不會根據瀏覽器窗口調整大小，並且卡片中的內容會重疊並看起來很難看。如何根據瀏覽器窗口大小將網格列表設置爲動態顯示？或者如何根據瀏覽器窗口大小設置網格中的卡片數量？md-grid-list響應屬性在調整瀏覽器窗口大小時不起作用

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

來源

2017-05-10 Mythri

您使用的是Angular 2嗎？ –

@ShrutiAgarwal是的。我正在使用Angular 2.4.10版本 – Mythri

像md-cols-sm這樣的指令無效。請看看這個更多的細節：https://material.angular.io/components/component/grid-list –

像md-cols-sm這樣的指令對於角度平滑的md-grid-list無效。請看看這個更多的細節：Angular 2 md-grid-list

你可以使用flexbox佈局角（dzurico.com/angular-flex-layout,github.com/angular/flex-layout/wiki/Responsive-API）或寫你自己的css類來實現flexbox。

來源

2017-05-11 08:52:12

謝謝。我嘗試安裝flex佈局，並收到此錯誤消息。你可以幫我嗎？我使用「npm install @ angular/flex-layout」安裝了flex佈局。安裝後，我得到這個打字錯誤消息。「node_modules/@ angular/core/index」'沒有導出成員'Renderer2'。「」node_modules/@ angular/core/index「'沒有導出成員'InjectionToken'。」 – Mythri

安裝flexbox後是否出現錯誤？你可以請嘗試按照以下鏈接中的步驟再次安裝flex佈局：https://alligator.io/angular/flex-layout/ –

我發現@ angular/flex-layout的最新版本需要Angular v4.x，並且將會不能與此鏈接的Angular v2.x兼容https://github.com/angular/flex-layout/blob/master/CHANGELOG.md – Mythri

md-grid-list響應屬性在調整瀏覽器窗口大小時不起作用

回答

相關問題