列的内边距 [基础]答案

【问题标题】：Inner-margin on columns [Foundation]列的内边距 [基础]
【发布时间】：2013-12-17 06:59:14
【问题描述】：

我有 2 列的行。我希望这些列跨越行的整个宽度并在它们之间留出一个边距。这样它们就可以与上面和下面的行对齐。

默认选项会在列的两侧添加边距，这对我不起作用，因为列与其他行不对齐。我发现了删除默认边距的“collapse”类，但我仍然需要两列之间的边距。

我可以创建自己的类并稍微修改我的标记来解决这个问题，但我想确保 Foundation 不会以某种方式为我做这件事。

对于处理这种情况，您有什么建议或最佳实践吗？

我附上了一张图片，向您展示我的设计要求。

谢谢！

【问题讨论】：

你的 Foundation 版本是什么？

标签： css zurb-foundation

【解决方案1】：

https://gist.github.com/slawaEremin/7993669

如果我理解正确，您需要在列内添加一些块。

问题是，如果只有一列，您始终应该使用 .row 和 *-12 包装您的内容：

例如：

<div class="row">
  <div class="small-12 columns">
     Some content
  </div>
</div>

<div class="row">
  <div class="small-6 columns">
     Some content
  </div>
  <div class="small-6 columns">
      Some content
  </div>
</div>

【讨论】：

嘿斯拉瓦，谢谢你的建议。不过我不追。您的代码与我的代码相同，只是您在现有代码之上没有另一行。如果你添加一个，你会看到我的问题（列两边的边距，我只需要在里面）。这是向您展示的肮脏编辑。 codepen.io/anon/pen/parqH
您将代码插入 jsfiddle 吗？因为您的示例不起作用。尝试在新标签中打开您的链接。基金会链接：cdn.foundation5.zurb.com/foundation.css cdn.foundation5.zurb.com/foundation.js
只需水平扩展渲染区域，使列并排。然后注意这两列是如何在外边缘有 5 个像素的边距，将它们与上面的红色行分开。