Bootstrap Horizontal Gutters水平间隙不显示问题咨询

问题原因 #

看不到水平间隙的核心原因是给.col直接添加了border类。Bootstrap的水平 gutter（通过gx-*类实现）依赖以下机制生效：

• 给.row设置负左右外边距，抵消容器的内边距
• 给.col设置左右内边距，从而在列之间形成视觉间隙

但当你给.col加border时，边框会直接附着在.col的边缘，而.col的内边距是元素内部空间，导致两个列的边框直接贴合，视觉上就看不到水平间隙了。

修复方案 #

把border类从.col移到内部的.p-3容器上，让边框处于列的内边距内侧，水平间隙就能正常显示：

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
  <title>Dash</title>
</head>
<body>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
  <div class="container px-4 text-center">
    <div class="row gx-5">
      <div class="col">
       <div class="p-3 border">Custom column padding</div>
      </div>
      <div class="col">
        <div class="p-3 border">Custom column padding</div>
      </div>
    </div>
  </div>
</body>
</html>

也可以给.row添加.gap-5类（配合网格系统的 flex 特性）直接设置列间间隙，但优先推荐第一种符合官方 gutter 设计逻辑的修复方式。

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