列中有边距的卡片

Question

我有一个 2 列网格，每行有 2 张卡片。我还想要一个边距，这样卡片就不会相互接触，但是当我将 w3-margin 添加到我的卡片时，它们会换行。

如何在不影响列完整性的情况下在卡片周围留出边距？谢谢。

Fiddle（删除 w3-margin 的实例以查看其工作情况）：https://jsfiddle.net/n2fole00/7o6bnosu/

<div class="w3-row-padding">

  <div class="w3-col s6 m6 l6 w3-card-2 w3-yellow w3-margin">
    <p>Cards should be on the same row with some space between them.</p>
  </div>

  <div class="w3-col s6 m6 l6 w3-card-2 w3-green w3-margin">
    <p>Cards should be on the same row with some space between them.</p>
  </div>

</div>

Answer 1

我明白了。我只是想在一个 div 中做太多事情。如果有人感兴趣，这是我的解决方案。

<div class="w3-col m6">
  <div class="w3-card-2 w3-margin w3-light-grey w3-center" style="">
    ...content...
  </div>
</div>

列中有边距的卡片

Cards with margins in columns

w3.css