Bootstrap 网格列间距

问题

Bootstrap 网格系统中，列与列之间的间隙宽度是多少？如何自定义？

解答

默认间距

Bootstrap 4/5 的默认列间距（gutter）是 30px，通过左右各 15px 的 padding 实现。

<!-- 每列左右各有 15px padding，相邻列之间形成 30px 间距 -->
<div class="container">
  <div class="row">
    <div class="qe6ks">左列（右 padding 15px）</div>
    <div class="qe6ks">右列（左 padding 15px）</div>
  </div>
</div>

Bootstrap 5 自定义间距

Bootstrap 5 提供了 gutter 工具类：

<!-- g-0: 无间距 -->
<div class="row g-0">
  <div class="qe6ks">无间距</div>
  <div class="qe6ks">无间距</div>
</div>

<!-- g-3: 1rem 间距 -->
<div class="row g-3">
  <div class="qe6ks">1rem 间距</div>
  <div class="qe6ks">1rem 间距</div>
</div>

<!-- gx-*: 仅水平间距 -->
<div class="row gx-5">
  <div class="qe6ks">水平 3rem</div>
  <div class="qe6ks">水平 3rem</div>
</div>

<!-- gy-*: 仅垂直间距 -->
<div class="row gy-4">
  <div class="qe6ks">垂直 1.5rem</div>
  <div class="qe6ks">垂直 1.5rem</div>
</div>

Gutter 尺寸对照表

类名	间距值
g-0	0
g-1	0.25rem
g-2	0.5rem
g-3	1rem
g-4	1.5rem
g-5	3rem

Bootstrap 4 移除间距

<!-- Bootstrap 4 使用 no-gutters -->
<div class="row no-gutters">
  <div class="qe6ks">无间距</div>
  <div class="qe6ks">无间距</div>
</div>

关键点

• 默认列间距 30px，左右各 15px padding
• Bootstrap 5 用 g-*、gx-*、gy-* 控制间距
• Bootstrap 4 用 no-gutters 移除间距
• .container 也有 15px 左右 padding，与列的 padding 配合形成对齐
• 间距通过 padding 实现，不影响列宽计算