在材料设计中在全宽度卡之间增加垂直空间。

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>

​

使用嵌套网格更新。