Foundation框架列间距调整：全局修改与特定列设置方法

嘿，我来帮你解决这两个Foundation框架下的列间距调整问题，给你两种稳妥的方案（尽量不直接改框架源码，避免影响全局布局）：

问题1：缩小特定3列之间的间距 #

首先说下Foundation的核心逻辑：列之间的间距（gutter）默认是靠columns类的左右padding实现的，而外层row的负margin是用来抵消这些padding的，保证整体布局对齐。

不推荐直接改foundation.css的原因 #

如果直接修改框架源码里的.row和.columns的margin/padding属性，会影响所有页面的列布局，后续维护起来很麻烦。

推荐方案：自定义类仅影响目标列 #

给那3个medium-4所在的内层row添加一个自定义类（比如custom-narrow-gutter），然后通过CSS覆盖该类下的间距样式：

修改后的HTML

<div class="row">
  <div class="medium-10 columns" >
    <!-- 给这个row添加自定义类 -->
    <div class="row custom-narrow-gutter">
      <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>

对应的自定义CSS

/* 调整row的负margin，抵消columns的padding */
.custom-narrow-gutter {
  margin-left: -0.5rem; /* 可根据需求调整，默认一般是-1rem */
  margin-right: -0.5rem;
}
/* 缩小columns的左右padding，实现更窄的间距 */
.custom-narrow-gutter .columns {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

如果非要修改foundation.css的话，你可以搜索.row的margin-left/margin-right属性，以及.columns的padding-left/padding-right属性，但再次强调，这种全局修改风险很高。

问题2：仅调整包含4个子列的特定列的间距 #

同样用自定义类的思路，只给需要调整的父列添加标识类，然后针对性修改它内部子列的间距：

示例HTML结构（对应你的需求） #

<div class="row">
  <!-- 第一列：包含2个子列 -->
  <div class="medium-6 columns">
    <div class="row">
      <div class="medium-6 columns"> </div>
      <div class="medium-6 columns"> </div>
    </div>
  </div>
  <!-- 第二列：包含4个子列，添加自定义类adjust-sub-gutter -->
  <div class="medium-6 columns adjust-sub-gutter">
    <div class="row">
      <div class="medium-3 columns"> </div>
      <div class="medium-3 columns"> </div>
      <div class="medium-3 columns"> </div>
      <div class="medium-3 columns"> </div>
    </div>
  </div>
</div>

对应的自定义CSS #

/* 调整目标列内部row的负margin */
.adjust-sub-gutter .row {
  margin-left: -0.3rem; /* 自定义间距值，按需调整 */
  margin-right: -0.3rem;
}
/* 调整目标列内部columns的padding */
.adjust-sub-gutter .columns {
  padding-left: 0.3rem;
  padding-right: 0.3rem;
}

这样就只会修改第二列里4个子列的间距，完全不会影响其他列的布局。

内容的提问来源于stack exchange，提问作者RallyCat