Bootstrap 表格布局中，列元素的间隔问题

在Bootstrap框架中，.row类被用于创建一个列的水平布局，而.col-*-*类用于创建列。为了在列之间添加间隔，Bootstrap提供了一些类专门用于调整列之间的间隔，这些类可以直接应用于.col-*-*创建的列上。

以下是一些常用的间隔类：

• .no-gutters：移除列之间的间隔（内间距）。
• .g-0：移除列之间的间隔（全写形式）。
• .g-1：添加最小间隔（10px）。
• .g-2：添加中等间隔（20px）。
• .g-3：添加大间隔（30px）。
• .g-4：添加大间隔（40px）。
• .g-5：添加超大间隔（50px）。

<div class="container">
  <div class="row g-3">
    <div class="col-md-4">Column 1</div>
    <div class="col-md-4">Column 2</div>
    <div class="col-md-4">Column 3</div>
  </div>
</div>

在这个例子中，g-3类被应用到row上，这会在所有列之间添加20px的间隔（对于中等屏幕设备）。这样，列之间的垂直间隔将是20px。