修复WordPress站点列空白间距，同时确保响应式布局正常

核心问题 #

你当前采用固定宽度的4列布局，直接用负margin/padding缩小间距会破坏响应式特性，原因是固定宽无法自适应不同屏幕尺寸。以下是两种不丢失响应式的解决方案：

方案1：保留响应式的同时缩小列间距 #

放弃固定宽度方案，改用Flexbox或Grid布局控制间距，这两种布局原生支持响应式适配：

Flexbox实现方式：

修改.bx--row和.bx--tile样式，用gap替代margin控制间距，通过flex属性实现自适应列宽：

/* 将行容器转为flex布局，开启自动换行 */
.bx--row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem; /* 设置你需要的列间距，比如0.5rem替代原1rem margin */
  min-height: 50px;
}

/* 调整tile样式，移除原有margin，用flex分配宽度 */
.bx--tile {
  padding: 0;
  height: 74px;
  margin: 0; /* 去掉原1rem margin，避免与gap重复 */
  flex: 1 1 calc(25% - 0.375rem); /* 4列平分宽度，减去gap的一半防止总宽度溢出 */
}

/* 媒体查询保证小屏幕响应式 */
@media (max-width: 768px) {
  .bx--tile {
    flex: 1 1 calc(50% - 0.25rem); /* 平板端显示2列 */
  }
}
@media (max-width: 480px) {
  .bx--tile {
    flex: 1 1 100%; /* 手机端显示1列 */
  }
}

Grid实现方式（更直观）：

Grid可直接定义列数与间距，响应式适配逻辑更简单：

.bx--row {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* 4列等宽 */
  gap: 0.5rem; /* 列间距 */
  min-height: 50px;
}

/* 响应式适配 */
@media (max-width: 768px) {
  .bx--row {
    grid-template-columns: repeat(2, 1fr); /* 平板端2列 */
  }
}
@media (max-width: 480px) {
  .bx--row {
    grid-template-columns: 1fr; /* 手机端1列 */
  }
}

.bx--tile {
  padding: 0;
  height: 74px;
  margin: 0; /* 移除原有margin */
}

方案2：单独缩小某列宽度 #

若仅需调整单列宽度，给目标列添加自定义类（比如narrow-column），再通过Flex或Grid单独设置宽度：

Flex方式：

.bx--row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  min-height: 50px;
}

/* 目标窄列 */
.bx--tile.narrow-column {
  flex: 1 1 calc(20% - 0.375rem); /* 占总宽度的20% */
  margin: 0;
  padding: 0;
  height: 74px;
}

/* 其他3列平分剩余宽度 */
.bx--tile:not(.narrow-column) {
  flex: 1 1 calc((80% - 0.5rem * 3)/3);
  margin: 0;
  padding: 0;
  height: 74px;
}

/* 响应式适配 */
@media (max-width: 768px) {
  .bx--tile.narrow-column,
  .bx--tile:not(.narrow-column) {
    flex: 1 1 calc(50% - 0.25rem);
  }
}
@media (max-width: 480px) {
  .bx--tile.narrow-column,
  .bx--tile:not(.narrow-column) {
    flex: 1 1 100%;
  }
}

Grid方式：

直接在grid-template-columns中指定列的宽度比例：

.bx--row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 0.8fr; /* 第四列宽度为其他列的0.8倍 */
  gap: 0.5rem;
  min-height: 50px;
}

/* 响应式适配 */
@media (max-width: 768px) {
  .bx--row {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 480px) {
  .bx--row {
    grid-template-columns: 1fr;
  }
}

小提示 #

你现有CSS中的font-size均未添加单位（比如font-size: 16），浏览器会解析错误，记得补充px或rem，例如font-size: 16px。

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