Zurb Foundation：更改列之间的填充答案

【问题标题】：Zurb Foundation: Changing padding between columnsZurb Foundation：更改列之间的填充
【发布时间】：2013-03-23 00:30:54
【问题描述】：

HTML/CSS 编码的新手，但到目前为止一直喜欢使用 Foundation 前端。有一个小问题：如何更改行内列元素之间的填充？

相关页面可在以下位置找到：

www.myfootprintcalculator.com

其中一行的代码是这样的：

<!--fourthrow><!-->

<div class="row">

<div class="large-3 columns" style="text-align: center;">
<a href="trash.html"><img src="metro_tiles/trash.png"></a> 
</div>

<div class="large-3 columns" style="text-align: center;">
<a href="water.html"><img src="metro_tiles/water.png"></a> 
</div>

<div class="large-3 columns" style="text-align: center;">
<a href="energy.html"><img src="metro_tiles/account.png"></a> 
</div>

<div class="large-3 columns" style="text-align: center;">
<a href="about.html"><img src="metro_tiles/about.png"></a> 
</div>

</div>

有人可以指出一种直接的方法来使列之间的填充瓷砖的数量与行之间的填充相同吗？ Foundation 的 CSS 文件非常大，对于新手来说有点吓人。

【问题讨论】：

标签： html css zurb-foundation

【解决方案1】：

删除列之间的填充/装订线的最简单方法是在行上使用collapse 类。如果您想要更多控制权，请继续阅读...

如果您使用的是 Sass/Compass、zurb-foundation gem 或自定义下载，还有几个附加选项。例如，如果您希望在整个应用程序中更改列间距，您可以设置 $column-gutter 变量。对于像这样固定间距的一组元素，你可能还需要考虑块状网格。

如果您只想将自定义的装订线应用到某些行，您可以定义一个新类，例如为行定义一个 .feature-tiles 并自定义列。例如：

@import 'foundation';

.feature-tiles {
  $row-width: em-calc(800);
  @include grid-row;

  .columns, .column {
    $column-gutter: 0;
    @include grid-column;
  }
}

此示例设置了一个可用于行的类（而不是 row），设置总行宽，并移除列之间的间距，适用于舒适的平铺布局。您可以像以前一样对每个图块使用large-3 columns，以获得一行中的四个图块。 em-calc 只是一个帮助器，它根据页面的基本字体大小从提供的像素值计算以 em 为单位的大小。这有助于保持跨设备的相对大小。

网格的文档页面解释更多：http://foundation.zurb.com/docs/components/grid.html

在上面的例子中，我建议图片内容多于背景，所以img 标签可能是合适的。这是一篇自以为是的文章，更多地解释了这些选项：http://csswizardry.com/2010/10/your-logo-is-an-image-not-a-h1/

【讨论】：

这回答了问题，应该标记为解决方案imo :)

【解决方案2】：

另外请记住，您仍然可以在 CSS 中使用背景图片，并且无需担心默认的 Zurb CSS 文件。

只需制作一个 CSS 文件并将其保存到 CSS 文件夹并命名为 app.css 并保存即可。现在，如果您制定任何自己的规则，您可以将它们保存在这里。

因此，例如，您可以使用数值创建规则“主框”，并将其保存到您的 css 文件中。然后您可以对其应用背景图像。所以 HTML 看起来像这样：

<div class="row">

<div class="main-box large-3 columns" style="text-align: center;">
<a href="trash.html"><img src="metro_tiles/trash.png"></a> 
</div>

<div class="main-box2 large-3 columns" style="text-align: center;">
<a href="water.html"><img src="metro_tiles/water.png"></a> 
</div>

<div class="main-box3 large-3 columns" style="text-align: center;">
<a href="energy.html"><img src="metro_tiles/account.png"></a> 
</div>

<div class="main-box4 large-3 columns" style="text-align: center;">
<a href="about.html"><img src="metro_tiles/about.png"></a> 
</div>

</div>

然后在 app.css 中简单地给它一个带有背景图像的 CSS 规则，如下所示：

.main-box,.main-box2,.main-box3,.main-box4 {background-image: url(path to your image file here);}

或者，如果您需要单独的背景图像来分隔您的规则，例如：

.main-box{background-image:url();}
.main-box2{}
.main-box3{}
.main-box4{}

等等……

我应该注意，这只是一种方法。在响应式设计中，有时在 html 中输入图像确实很划算。使用背景图像只是覆盖默认容器填充的一种方法。

另外一个说明....如果您将 Zurbs CSS 文件中的默认 CSS 规则之一输入到 app.css 中；然后它将被覆盖。因此，您甚至可以更改默认 CSS 值，而不会弄乱原始文件。

【讨论】：