Question

这是我的代码：

<div>
      <ul class="small-block-grid-3">
          <li><img src="img/split-img/mufe-header1-1.jpg"></li>
          <li><img src="img/split-img/mufe-header1-2.jpg"></li>
          <li><img src="img/split-img/mufe-header1-3.jpg"></li>
      </ul>
      <ul class="small-block-grid-3">
          <li><img src="img/split-img/mufe-header1-4.jpg"></li>
          <li><img src="img/split-img/mufe-header1-5.jpg"></li>
          <li><img src="img/split-img/mufe-header1-6.jpg"></li>
      </ul>
  </div>

基金会的新用户，我正在尝试在我的scss文件中自定义块网格组件的默认间距：

 $block-grid-default-spacing: rem-calc(5);

结果是水平间距是正确的而不是垂直间距，因为间距设置在网格的每个左侧和右侧，因此有时可能会加倍。请查看http://imgur.com/LieY9QC

任何人都可以帮我解决这个问题，因为我希望间距（水平和垂直）是唯一的。

Answer 1

我不相信块网格间距对垂直间距有任何影响。您必须在另一个针对这些块网格的CSS文件中指定它并添加垂直间距。

所以我可以尝试以下方法：

$block-grid-default-spacing: 20px;

我会将其设为px值，以便您可以在目标CSS中匹配它。或者您可以将其保留为默认值，并处理自定义CSS中的所有间距。

然后我会在你的ul中添加一个类，所以你可以在单独的CSS中定位它们。

<ul class="small-block-grid-3 image-grid">

.image-grid li {
  margin: 20px 0;
}

或者如果你想单独留下$ block-grid-default-spacing ..

    .image-grid li {
      margin: 20px;
    }

基础5块 - 网格 - 默认 - 间距的问题可以水平和垂直设置

1 个答案: