如何在Drupal Barrio主题（Bootstrap5）全局调整列间距并适配嵌套结构

你的问题核心是自定义的.row和.col样式破坏了Bootstrap原生的嵌套布局逻辑——Bootstrap原本靠内层.row的负margin抵消外层.col的padding来保证嵌套结构的间距一致性，直接全局设置所有.row的负margin会让嵌套的.row叠加负边距导致布局错乱。

下面是几个不用SCSS就能解决的实用方案：

方案1：层级化修正嵌套样式 #

先给基础层级的行和列设置全局间距，再针对嵌套在列内部的行和列重置样式，保持间距统一：

/* 基础全局样式：外层行和列的40px间距（左右各20px padding） */
.row {
  margin-left: -20px;
  margin-right: -20px;
}
.col, [class^="col-"], [class*=" col-"] {
  padding-left: 20px;
  padding-right: 20px;
}

/* 修正嵌套行：抵消外层col的padding，避免负边距叠加 */
.col .row,
[class^="col-"] .row,
[class*=" col-"] .row {
  margin-left: -20px;
  margin-right: -20px;
}

/* 修正嵌套列：保持和外层一致的内边距，保证间距统一 */
.col .col,
.col [class^="col-"],
.col [class*=" col-"],
[class^="col-"] .col,
[class^="col-"] [class^="col-"],
[class^="col-"] [class*=" col-"],
[class*=" col-"] .col,
[class*=" col-"] [class^="col-"],
[class*=" col-"] [class*=" col-"] {
  padding-left: 20px;
  padding-right: 20px;
}

这个方案通过精准的选择器，确保嵌套层级的行和列继承正确的间距值，不会出现错位或间距异常。

方案2：用原生CSS变量统一管控间距 #

用CSS变量替代硬编码的数值，既方便后续调整，也能清晰维护嵌套样式：

/* 定义全局间距变量，20px对应单边padding，双边就是40px间距 */
:root {
  --custom-gutter-x: 20px;
}

/* 全局行样式：负边距抵消列的padding */
.row {
  margin-left: calc(-1 * var(--custom-gutter-x));
  margin-right: calc(-1 * var(--custom-gutter-x));
}

/* 全局列样式：设置单边padding */
.col, [class^="col-"], [class*=" col-"] {
  padding-left: var(--custom-gutter-x);
  padding-right: var(--custom-gutter-x);
}

/* 嵌套行修正：保持和外层行一致的负边距逻辑 */
.row .row {
  margin-left: calc(-1 * var(--custom-gutter-x));
  margin-right: calc(-1 * var(--custom-gutter-x));
}

后续要调整间距，只需要修改--custom-gutter-x的值即可，不用逐行修改CSS。

方案3：Drupal主题预处理自动添加Bootstrap原生间距类 #

既然用的是Drupal Barrio主题，更优雅的方式是通过主题预处理函数，给所有.row自动添加Bootstrap的gx-5类（或自定义类），利用Bootstrap原生逻辑处理嵌套：

在你的主题目录下的[your-theme].theme文件中添加：

function barrio_preprocess_container(&$variables) {
  // 识别所有Bootstrap row容器
  if (isset($variables['attributes']['class']) && in_array('row', $variables['attributes']['class'])) {
    // 自动添加gx-5类，也可以换成自定义的类名
    $variables['attributes']['class'][] = 'gx-5';
  }
}

如果原生gx-5的间距不符合需求，还可以自定义扩展：

/* 自定义gx-5的间距值，比如设置为40px双边间距 */
.gx-5 {
  --bs-gutter-x: 2rem; /* 2rem=32px，根据需要调整，20px对应1.25rem */
}

这个方案完全贴合Drupal主题开发流程，不用手动修改任何页面结构，Bootstrap原生的gx类已经完美处理了嵌套场景的间距问题。

关键注意点 #

• 不要直接全局覆盖.row和.col的margin/padding后忽略嵌套逻辑，Bootstrap的嵌套布局是靠"行负边距抵消列padding"的机制维持的，破坏这个机制就会出现嵌套失效。
• 测试时一定要覆盖多层嵌套场景（比如row -> col -> row -> col），确保所有层级的间距一致。

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