在 Angular 2 材料的 md-grid-list 中使用 md-cards答案

【问题标题】：using md-cards in a md-grid-list in Angular 2 material在 Angular 2 材料的 md-grid-list 中使用 md-cards
【发布时间】：2016-12-19 17:43:18
【问题描述】：

我是 Angular 2 材料设计的新手。我想要实现的是使用 angular2 材料创建一个网格列表，并将 md-cards 放在 md-grid-tile 中。虽然 md-card 有 position:relative，但它们溢出了 md-grid-tile。 click this link, the cards are overlapping and they are overflowing the md-grid-tile in a md-grid-list

以下是我使用的代码：

<body>
    <md-toolbar layout="row"> <md-button class="menu">
    <md-icon md-svg-icon="menu"></md-icon> </md-button>
    <h3>Pipeline UI</h3>
    </md-toolbar>

    <md-grid-list cols="2" rowHeight="2:1" gutterSize="15px">
        <md-grid-tile layout-wrap *ngFor="let item of releaseType">
            <md-card flex layout-fill>
                <md-card-header>test1</md-card-header>
                <md-card-content>
            <stage [init]="item.submissions"></stage></md-card-content>
            </md-card>
        </md-grid-tile>
    </md-grid-list>
</body>

非常感谢任何解决此问题的帮助:)

【问题讨论】：

标签： angular css angular-material

【解决方案1】：

据我所知，md-grid-tile 在另一个名为 figure 的 dom 元素中创建，其 css 规则之一是 align-items: center;。我用过：

md-grid-tile figure {
    align-items: flex-start!important;
}

【讨论】：

我已尝试将此 css 片段添加到 app.component.css（使用 app.component 显示我的网格 ATM）。不幸的是，它不起作用。您在哪里定义了样式？顺便说一句 - 当直接在 chrome 调试器中应用时，此修复程序有效。
css 规则在另一个自定义 css 文件中。自定义规则/文件必须在默认角度材质样式之后加载，因为当存在多个具有相同“特异性级别”的规则时，最后出现的规则会胜出。