3

我有一个非常简单的问题：如何在 Foundation 4 中的行之间获得边距？

以下标记每行产生 3 个间隔链接图像，但行之间没有间隙。也许不应该这样做 3 x 3 网格。否则，Foundation 可以做一个没有额外 CSS 的方形网格吗？

<div class="row">
  <a class="large-4 columns"><img /></a>
  <a class="large-4 columns"><img /></a>
  <a class="large-4 columns"><img /></a>
</div>
<div class="row">
  <a class="large-4 columns"><img /></a>
  <a class="large-4 columns"><img /></a>
  <a class="large-4 columns"><img /></a>
</div>
<div class="row">
  <a class="large-4 columns"><img /></a>
  <a class="large-4 columns"><img /></a>
  <a class="large-4 columns"><img /></a>
</div>

出于时间考虑，我将其实现为 9 个左浮动元素，但我仍然对 Foundation 中的行间距感到好奇。

塔卢克

4

2 回答 2

2

.row您可以使用 CSS覆盖默认边距margin-bottom: 10px;

或者，在 Foundation 中实现 3x3 图像网格的好方法是使用 3-up block grid。

于 2013-10-16T21:47:36.820 回答
0

我还强烈建议在导入基础部分后，使用 Sass 在一个地方或在部分Sass 文件中以多种方式统一更改它。

例如，如果您使用块网格路线，您可以通过 Zurb w/Foundation 4 提供的 Sass 变量统一更改它：

$block-grid-elements: 12;
$block-grid-default-spacing: em-calc(20);

或者，您可以使用如下的混合单独执行此操作

.my-fancy-three-by-three
   +block-grid( $per-row: 3, $base-styles: true) 
   // If you're going mobile-first, and would do multiple block variants depending on various sizes, additional block-grid declerations are recommended from my personal experience should be FALSE in order to not have unnecessary code bloat.

如果您的块变体很简单，并且 Foundation 4 为您提供的预制媒体查询大小与您正在制作的整体设计一起工作，您可以使用内置块类，例如ul.small-block-grid-#.

就整个网格而言，使用 Foundation 4 提供的涉及间隙的变量再简单不过了：

  $block-grid-elements: 12
  $block-grid-default-spacing: emCalc(20px)

您可以从Foundation 4 可用的文档中看到更多信息。

于 2013-11-15T07:47:28.210 回答