显示它们之间有空格的列

Question

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

以下是来自youtube的示例：

Answer 1

取决于你想要多少间距......当你使用前端框架时，你需要做一些权衡，开发速度与“不太定制”。从youtube中获取的样本的间距小于框架的默认列gutter，所以你肯定“默认情况下它们都是相互跟随的”，我认为不是很精确;它们有间距，如果要删除，只需使用row collapse作为列容器的类。

现在，如果你想要更多间距而不是默认值，你仍然可以选择：

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

Answer 2

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

请点击此处了解详情：http://foundation.zurb.com/sites/docs/grid.html

Answer 3

这篇文章已经用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来从每个单元格的宽度中减去边距，以防止在添加普通边距时看到换行。