Bootstrap5中增加了哪些与栅格边距相关的类样式

在Bootstrap 5中，增加了以下与栅格边距相关的类样式：

1. `.gx-*`和`.gy-*`：用于设置栅格列和行之间的水平和垂直间距，其中`*`表示间距的大小，可选值为0、1、2、3、4、5。

2. `.gap-*`：用于设置栅格元素之间的间距，其中`*`表示间距的大小，可选值为0、1、2、3、4、5。

3. `.gap-*-*`：用于在不同的屏幕尺寸下设置栅格元素之间的间距，其中第一个`*`表示屏幕尺寸，可选值为`sm`（小屏幕）、`md`（中等屏幕）、`lg`（大屏幕）和`xl`（超大屏幕），第二个`*`表示间距的大小，可选值为0、1、2、3、4、5。

4. `.gx-*-*`和`.gy-*-*`：用于在不同的屏幕尺寸下设置栅格列和行之间的水平和垂直间距，其中第一个`*`表示屏幕尺寸，可选值为`sm`、`md`、`lg`和`xl`，第二个`*`表示间距的大小，可选值为0、1、2、3、4、5。

例如，以下代码可以在所有屏幕尺寸下设置栅格列和行之间的水平和垂直间距为3：

<div class="row gx-3 gy-3">
  <div class="col">Column 1</div>
  <div class="col">Column 2</div>
</div>

而以下代码可以在大屏幕上设置栅格元素之间的间距为4，在小屏幕上设置栅格元素之间的间距为1：

<div class="row gap-1 gap-lg-4">
  <div class="col">Column 1</div>
  <div class="col">Column 2</div>
</div>