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

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

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

Answer 2

您可以将 .row-eq-height 类添加到每张卡片中。这使用了flexbox CSS3属性，因此如果您不想添加该类，则与执行操作相同：

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

角度2材质：MdCards的高度相同

2 个答案: