0
MDLを使用してウェブサイトを構築しようとしています。マテリアルデザインライト - グリッド内で大きいカードでテキストをサポートしているカードがサポートされていない
サポートするテキストがないことのように見える：グリッド内のカードを使用した場合、このようにカードは、行内の他よりも小さいときしかし、カードアクションが下に整列しません私はそれを望んでいたように展開しませんが、それをどうやって作るのかはわかりません。
<!-- 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>
...と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;
}