显示列之间有 space

Question

如何显示列之间带有 space 的列？默认情况下，它们都是相互跟随的，我找不到改变它的方法。

这是来自 youtube 的示例：

Answer 1

取决于您想要多少间距...当您使用前端框架时，有时您需要做出一些权衡，开发速度与"not too customized"。您从 youtube 中获取的示例的间距小于框架的默认列间距，因此您对 "by default they are all following each other" 的肯定，我认为不太准确；它们有间距，如果要删除，只需使用 row collapse 作为列容器的 class。

现在，如果您想要比默认间距更多，您仍然有以下选择：

您可以在每个元素之间留一列，只需为每个元素添加一个列偏移即可。
您可以在框架设置中更改列间距大小（如果您使用的是 CLI 版本或自定义版本，而不是预构建版本）
您还可以编写一些 CSS 来增加特定列容器的间距（我不建议全局这样做，因为您可能会弄乱框架）。

Answer 2

您的解决方案是使用 Bootstrap 或 Foundation 等框架。在基础中，每个 'column' 都在内部填充，因此您可以显示这样的网格。

阅读此处了解更多信息：http://foundation.zurb.com/sites/docs/grid.html

Answer 3

这个 post 是用 Zurb Foundation 标记的，所以我将使用他们的类来解决它，这是一个稍微变通的方法。例如，如果您想要三列能够继续添加项目并让它自动换行，您可以使用以下带有块网格的简单示例：

<div class="grid-x small-up-3">
  <div class="cell">
    Placeholder Text
  </div>
  <div class="cell">
    Placeholder Text
  </div>
  <div class="cell">
    Placeholder Text
  </div>
  <div class="cell">
    Placeholder Text
  </div>
  <div class="cell">
    Placeholder Text
  </div>
  <div class="cell">
    Placeholder Text
  </div>
</div>

及以下CSS

.small-up-3 > .cell {
  width: calc(33.33333% - 4px);
  margin-left: 2px;
  margin-right: 2px;
}
.small-up-3 > .cell:nth-of-type(n+4) {
  margin-top: 2px;
}

需要 calc 从每个单元格的宽度中减去边距，以防止在仅添加正常边距时看到的换行。

显示列之间有 space

Displaying columns with space between them

zurb-foundation