twitter-bootstrap - Angular 2 材质：MdCard 的高度相同

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..但是如何？）

普朗克

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

Answer 1

好吧，这个 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;
}

普朗克

如果发布了更好的答案，我很乐意接受。

Answer 2

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

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