Material Design Lite -卡片支持在网格中使用较大的卡片不扩展文本

Question

我正在尝试建立一个使用MDL的网站。但是，当在网格中使用卡片时，当卡片比行中的其他卡片小时，卡片操作不会与底部对齐，如下所示：

​

​

看起来支持文本没有像我想要的那样扩展，但不确定我是如何做到这一点的。下面是HTML中的相关代码片段：

<!-- Content -->
<main class="mdl-layout__content">
    <div class="mdl-grid">

        <!-- Short supporting text -->
        <div class="home-card mdl-cell mdl-cell--4-col mdl-cell--8-col-tablet mdl-card mdl-shadow--2dp">
            <div class="mdl-card__title">
                <h2 class="mdl-card__title-text">Blog</h2>
            </div>
            <div class="mdl-card__supporting-text">
                A fairly recent addition detailing some of the work done on current projects.
            </div>
            <div class="mdl-card__actions mdl-card--border">
                <a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">Visit Blog</a>
            </div>
            <div class="mdl-card__menu">
                <button class="mdl-button mdl-button--icon mdl-js-button mdl-js-ripple-effect">
                    <i class="material-icons">share</i>
                </button>
            </div>
        </div>

        <!-- Long supporting text -->
        <div class="home-card mdl-cell mdl-cell--4-col mdl-cell--8-col-tablet mdl-card mdl-shadow--2dp">
            <div class="mdl-card__title">
                <h2 class="mdl-card__title-text">Blog</h2>
            </div>
            <div class="mdl-card__supporting-text">
                A fairly recent addition detailing some of the work done on current projects.
                A fairly recent addition detailing some of the work done on current projects.
            </div>
            <div class="mdl-card__actions mdl-card--border">
                <a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">Visit Blog</a>
            </div>
            <div class="mdl-card__menu">
                <button class="mdl-button mdl-button--icon mdl-js-button mdl-js-ripple-effect">
                    <i class="material-icons">share</i>
                </button>
            </div>
        </div>
    </div>
</main>

...and the CSS：

.home-card > .mdl-card__title {
    color: #fff;
    height: 176px;
    background: url('../assets/coding-banner.jpg') center / cover;
    padding: 0
}
.home-card > .mdl-card__title > .mdl-card__title-text {
    width: 100%;
    padding: 16px;
    background: rgba(0, 0, 0, 0.3);
}
.home-card > .mdl-card__menu {
    color: #fff;
}

Answer 1

德尔普。将mdl-card--expand添加到支持文本目录正是我所需要的。

<div class="mdl-card__supporting-text mdl-card--expand">
    A fairly recent addition detailing some of the work done on current projects.
</div>