Question

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

以下标记每行产生3个间隔链接图像，但行之间没有间隙。也许不应该像这样做3 x 3网格。否则，基金会可以做一个没有其他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个左浮动元素，但我仍然对基金会中的行间距感到好奇。

Ta，Luke

Answer 1

您可以使用.row

覆盖CSS中margin-bottom: 10px;的默认边距

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

基金会5 block grid
Foundation 6 block grids

Answer 2

我还高度建议使用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-#。

就整个网格而言，使用提供的变量（包括基金会4提供的差距）并不简单：

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

您可以从基金会4的docs中看到更多信息。

基础4 - 行之间的边距/装订线

2 个答案: