如何在Bootstrap 5与Hugo中设置行列的水平和垂直Gutter

1. 修正行结构（解决行列不分隔问题） #

你当前的test.md把所有列都放在同一个row短代码内，导致两组col-8/col-4挤在同一行，需将每组列单独封装在row中，实现行与行的分隔：

修改后的test.md：

---
title: "Test"
description: "Test"
draft: false
menu:
    main:
        weight: 2
---

{{< row >}}
{{< column col-8 >}}

# Heading h1
---

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

## Heading h2

Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.
{{< /column >}}

{{< column col-4 >}}

# Heading h1

Li Europan lingues es membres del sam familie. Lor separat existentie es un myth. Por scientie, musica, sport etc, litot Europa usa li sam vocabular.

## Heading h2

Li lingues differe solmen in li grammatica, li pronunciation e li plu commun vocabules. Omnicos directe al desirabilite de un nov lingua franca: On refusa continuar payar custosi traductores.

{{< /column >}}
{{< /row >}}

{{< row >}}
{{< column col-8 >}}

# Heading h1
---

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

## Heading h2

Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.
{{< /column >}}

{{< column col-4 >}}

# Heading h1

Li Europan lingues es membres del sam familie. Lor separat existentie es un myth. Por scientie, musica, sport etc, litot Europa usa li sam vocabular.

{{< /column >}}
{{< /row >}}

2. 设置1rem的Gutter（行列间距） #

Bootstrap 5的g-*类以0.25rem为单位，g-4正好对应1rem的 gutter，可通过两种方式设置：

方案一：默认给所有行添加1rem Gutter #

修改row.html短代码：

{{ $class := "row g-4" }}
{{ with (.Get 0) }}
{{ $class = printf "%s %s" $class . }}
{{ end }}

<div class="{{ $class }}">
    {{ .Inner | .Page.RenderString }}
</div>

方案二：支持自定义Gutter（灵活调整） #

保留默认row类，允许调用短代码时传入gutter参数：

{{ $class := "row" }}
{{ with (.Get 0) }}
{{ $class = printf "%s %s" $class . }}
{{ end }}

<div class="{{ $class }}">
    {{ .Inner | .Page.RenderString }}
</div>

调用示例：

{{< row g-4 >}}

3. 添加行与行的垂直间距 #

若需要行之间额外的垂直间隔，可给row添加mb-4类（对应1rem下边距）：

• 方案一修改版：

{{ $class := "row g-4 mb-4" }}
{{ with (.Get 0) }}
{{ $class = printf "%s %s" $class . }}
{{ end }}

<div class="{{ $class }}">
    {{ .Inner | .Page.RenderString }}
</div>

• 方案二调用示例：

{{< row g-4 mb-4 >}}

4. 可选：调整列内部间距 #

如需列内留白，修改column.html添加p-4类（1rem内边距）：

{{- $class := "col border rounded p-4" }}
{{- with (.Get 0) }}
{{- $class = printf "%s %s" $class . }}
{{- end }}

<div class="{{ $class }}">
    {{ .Inner | .Page.RenderString }}
</div>

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