Angular 2 Material: MdCards 的高度相同

Question

我正在使用 Angular2、Material2 和 Bootstrap。 布局基本是

<div class="row">
  <div class="col-md-4">
    <md-card></md-card>
  </div>
  <div class="col-md-4">
    <md-card></md-card>
  </div>
  <div class="col-md-4">
    <md-card></md-card>
  </div>
</div>

所有卡片的内容不同，因此高度也不同。

如何让它们高度相同？ （flexboxes..但是如何？）

Plunker

注意：我将 Bootstrap 用于响应式网格，因为 Material2 仍然没有其布局系统。任何实体网格系统都适合我。

Answer 1

您可以将 class .row-eq-height 添加到每张卡片。这使用了 flexbox CSS3 属性，所以如果你不喜欢添加那个 class，它和做的一样：

.col-md-4 {
   display: flex;
}

Answer 2

好的，这个 CSS 似乎对我有用：

.row {
  display: flex;
  flex-wrap: wrap;
}

.row md-card,
.row md-card .md-card {
  height: 100%;
}

.row md-card .md-card {
  display: flex;
  flex-direction: column;
}

.row md-card .md-card md-card-content {
  flex-grow: 1;
}

Plunker

如果有更好的答案，我会很乐意接受。