如何调整基础框架中列之间的差距？

Question

我使用 Foundation 框架，我想减少列之间的差距。我应该更改 foundation.css 中的哪一部分以缩小这 3 列之间的差距？

html代码：

<div class="row">
    <div class="medium-10 columns" >
            <div class="row">
                    <div class="medium-4 columns">
                    </div>
                    <div class="medium-4 columns">
                    </div>
                    <div class="medium-4 columns">
                    </div>
            </div>
    </div>
    <div class="medium-2 columns" >
            <div class="row">
                    <div class="medium-6 columns">
                    </div>
                    <div class="medium-6 columns">
                    </div>
            </div>
    </div>

</div>

嗨，丹尼尔，谢谢，但是如果我想在特定列中进行调整呢？示例：在 1 行中，我有 2 列，1 列有 2 列，其他列有 4 列。我只想调整具有 4 列的第 2 列中的间隙

Answer 1

您必须像这样更改列的填充：

@media print, screen and (min-width: 40em) {
  .column, .columns {
      padding-right: 10px;
      padding-left: 10px;
  }
}

这会覆盖以下默认值：

    padding-right: .9375rem;
    padding-left: .9375rem;

见https://codepen.io/DanielRuf/pen/RvoYrr

Is 是从 https://github.com/zurb/foundation-sites/blob/4abaf7ad3c508bf3fc73cb5dfd8928f756968c7d/scss/grid/_gutter.scss#L16

中的 gutter mixin 生成的

我创建了另一个示例，其中包含两个类 pr10 和 pl10，用于向右列添加填充。

你也可以在行列上做同样的事情。

https://codepen.io/DanielRuf/pen/QYGPKO

@media print, screen and (min-width: 40em) {
  .pl10 {
      padding-left: 10px;
      background: green;
  }
  .pr10 {
      padding-right: 10px;
      background: green;
  }
}

<div class="row">
    <div class="medium-10 columns" >
            <div class="row">
                    <div class="medium-4 columns">1
                    </div>
                    <div class="medium-4 columns">2
                    </div>
                    <div class="medium-4 columns">3
                    </div>
            </div>
    </div>
    <div class="medium-2 columns" >
            <div class="row">
                    <div class="medium-6 columns pl10 pr10">4
                    </div>
                    <div class="medium-6 columns pl10 pr10">5
                    </div>
            </div>
    </div>
</div>

（pr10 和 pl10 是一个 shorthand 版本，通常用于 CSS 框架，具有实用程序类，如 Tachyons 和 tailwindcss。

或者您可以使用以下 CSS 来定位正确的列：

@media print, screen and (min-width: 40em) {
  .row > .medium-10.columns + .medium-2.columns > .row > .medium-6.columns {
      padding-left: 10px;
      padding-right: 10px;
      background: green;
  }
}

见https://codepen.io/DanielRuf/pen/gqgbNG

如何调整基础框架中列之间的差距？

How to adjust gap between columns in foundation framework?

zurb-foundation