css - 在 material-design-lite 中添加全宽卡之间的垂直空间

Question

如何在MDL卡片组件之间添加空格？

<div class="demo-card-event mdl-card mdl-shadow--2dp">
  <div class="mdl-card__title mdl-card--expand">
    <h4>
      Featured event:<br>
      May 24, 2016<br>
      7-11pm
    </h4>
  </div>
  <div class="mdl-card__actions mdl-card--border">
    <a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">
      Add to Calendar
    </a>
    <div class="mdl-layout-spacer"></div>
    <i class="material-icons">event</i>
  </div>
</div>

<div class="demo-card-event mdl-card mdl-shadow--2dp">
  <div class="mdl-card__title mdl-card--expand">
    <h4>
      Featured event:<br>
      May 24, 2016<br>
      7-11pm
    </h4>
  </div>
  <div class="mdl-card__actions mdl-card--border">
    <a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">
      Add to Calendar
    </a>
    <div class="mdl-layout-spacer"></div>
    <i class="material-icons">event</i>
  </div>
</div>

这是卡片组件，卡片之间没有空间，它们完全首尾相连。

是否有任何内置类来添加空间，或者我们需要手动添加，或者我的代码中是否有任何错误。

尝试添加 mdl-layout-spacer 类仍然无效。

找到一个没有人回答的旧线程。

Vertical adjustment between cards in Material Design Lite

编辑:

这是添加网格的正确方法吗？

<div class="mdl-grid" style="max-width: 90%;">
    <div class="mdl-cell mdl-cell--9-col mdl-card mdl-shadow--4dp">

    </div>

    <div class="mdl-cell mdl-cell--3-col mdl-typography--text-center">

        <div class="mdl-grid">
            <div class="mdl-cell mdl-cell--12-col mdl-card mdl-shadow--2dp">
                <div class="mdl-card__title mdl-card--expand">
                    <h4>
                        Featured event:<br>
                        May 24, 2016<br>
                        7-11pm
                    </h4>
                </div>
                <div class="mdl-card__actions mdl-card--border">
                    <a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">
                        Add to Calendar
                    </a>
                    <div class="mdl-layout-spacer"></div>
                    <i class="material-icons">event</i>
                </div>
            </div>
        </div>

    </div>
</div>

Answer 1

您可以在卡片周围添加一个行包装器并向卡片添加一个单元格类，或者将每张卡片包装在一个单元格类中，具体取决于您想要的效果。

<script src="https://code.getmdl.io/1.3.0/material.min.js"></script>
<link href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css" rel="stylesheet"/>
  <div class="mdl-grid" style="max-width: 90%;">
<div class="mdl-cell mdl-cell--9-col mdl-cell--8-col-tablet mdl-card mdl-shadow--4dp">
</div>
<div class="mdl-cell mdl-cell--3-col mdl-cell--8-col-tablet mdl-typography--text-center">
  <div class="mdl-grid">
    <div class="mdl-grid">
      <div class="mdl-cell mdl-cell--6-col mdl-cell--4-col-tablet demo-card-event mdl-card mdl-shadow--2dp">
        <div class="mdl-card__title mdl-card--expand">
          <h4>
            Featured event:<br>
            May 24, 2016<br>
            7-11pm
          </h4>
        </div>
        <div class="mdl-card__actions mdl-card--border">
          <a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">
            Add to Calendar
          </a>
          <div class="mdl-layout-spacer"></div>
          <i class="material-icons">event</i>
        </div>
      </div>

      <div class="mdl-cell mdl-cell--6-col mdl-cell--4-col-tablet demo-card-event mdl-card mdl-shadow--2dp">
        <div class="mdl-card__title mdl-card--expand">
          <h4>
            Featured event:<br>
            May 24, 2016<br>
            7-11pm
          </h4>
        </div>
        <div class="mdl-card__actions mdl-card--border">
          <a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">
            Add to Calendar
          </a>
          <div class="mdl-layout-spacer"></div>
          <i class="material-icons">event</i>
        </div>
      </div>
    </div>
  </div>
</div>

更新嵌套网格。