列之间的基础边距不起作用答案

【问题标题】：Foundation margin between columns not working列之间的基础边距不起作用
【发布时间】：2016-09-25 15:54:55
【问题描述】：

首先，我知道这是一个重复的问题（here 或 here），但解决方案对我不起作用。

这是我的问题：我有一个具有以下结构的网页：

<div class="row">
    <div class="small-1 columns">...</div>
    <div class="small-8 columns">...</div>
    <div class="small-3 columns">...</div>
</div>

在我的 8 列中，我有一个 Panel 容器，在其中：

<div class="row">
    <div class="small-1 columns">COLOR</div>
    <div class="small-2 columns">TITLE</div>
    <div class="small-1 columns">NAME</div>
    <div class="small-2 columns">SURNAME</div>
    <div class="small-2 columns">ADDRESS</div>
    <div class="small-2 columns">POSTAL CODE</div>
    <div class="small-2 columns">SUMMARY</div>
</div>

这是内容：

我希望每一列都有一个间隔分隔符。但是，如果我尝试添加这个差距（使用边距属性）：

有什么想法吗？

提前致谢！

【问题讨论】：

也许在你的 div 中添加一个 span 并在 span 上应用边距

标签： html css sass zurb-foundation

【解决方案1】：

Foundation 使用 .columns 上的左右填充和百分比宽度的组合来创建间隙（又名 gutter）。看看这个来自foundation.css：

.column, .columns {
    padding-left: 0.625rem;
    padding-right: 0.625rem;
    width: 100%;
    float: left;
}
.small-1 { width: 8.33333%; }
.small-2 { width: 16.66667%; }
...

通过向列添加边距，您会破坏宽度并使 .row > 100%，这就是它破坏的原因。作为一般规则，我建议不要在 .columns 中添加边距，因为它会破坏网格。

你有几个选择：

1 - 折叠行并在子列中添加您自己的填充和其他类

<div class="row collapse">
    <div class="small-1 columns"><div class="inner">COLOR</div></div>
    <div class="small-2 columns"><div class="inner">TITLE</div></div>
    <div class="small-1 columns"><div class="inner">NAME</div></div>
    <div class="small-2 columns"><div class="inner">SURNAME</div></div>
    <div class="small-2 columns"><div class="inner">ADDRESS</div></div>
    <div class="small-2 columns"><div class="inner">POSTAL CODE</div></div>
    <div class="small-2 columns"><div class="inner">SUMMARY</div></div>
</div>

.inner {background:#666; margin:0 5px; padding:5px;}

2 - 您似乎正在尝试创建各种图表。为表格数据使用实际的 HTML 表格并不可耻（这就是它的用途）。 Foundation 的默认表格样式其实挺好看的。

【讨论】：