Bootstrap列间距设置异常：gx-*引发横向滚动，gap-*破坏布局

你遇到的问题根源在于：

• gx-* 无效且出现横向滚动：你的 row 加了 px-5，而 Bootstrap 的 row 默认带有负外边距（用来抵消列的内边距），额外的水平内边距会导致内容溢出容器，引发横向滚动，同时干扰 gx-* 的间距效果。
• gap-* 导致最后一列换行：col-md-3 占父容器的 25% 宽度，四个加起来刚好 100%，但 gap-* 会额外占用空间，总宽度超过 100% 就会触发换行。

下面是几种可行的解决方法：

方法一：正确使用 gx-* 类 #

把 row 外包裹一层 container 或 container-fluid，同时移除 row 上的 px-5（如果需要整体内边距，加到外层容器上），这样 gx-* 就能正常生效且不会溢出：

<div className="container mb-4 px-5">
  <div className="row gx-4">
    <div className="col-md-3 bgOrange d-flex align-items-center justify-content-between p-4">
      ...
    </div>
    <div className="col-md-3 bgOrange d-flex align-items-center justify-content-between p-4">
      ...
    </div>
    <div className="col-md-3 bgOrange d-flex align-items-center justify-content-between p-4">
      ...
    </div>
    <div className="col-md-3 bgOrange d-flex align-items-center justify-content-between p-4">
      ...
    </div>
  </div>
</div>

方法二：用 gap-* 配合自适应列宽 #

如果想用 gap-*，可以把固定宽度的 col-md-3 改成自适应的 col-md，再加上 flex-grow-1 让列自动分配剩余空间，这样总宽度加上 gap 也不会超过容器：

<div className="row mb-4 px-5 gap-4 flex-wrap">
  <div className="col-md flex-grow-1 bgOrange d-flex align-items-center justify-content-between p-4">
    ...
  </div>
  <div className="col-md flex-grow-1 bgOrange d-flex align-items-center justify-content-between p-4">
    ...
  </div>
  <div className="col-md flex-grow-1 bgOrange d-flex align-items-center justify-content-between p-4">
    ...
  </div>
  <div className="col-md flex-grow-1 bgOrange d-flex align-items-center justify-content-between p-4">
    ...
  </div>
</div>

方法三：手动给列加外边距（兼容旧版 Bootstrap） #

如果是 Bootstrap 4 及以下版本，也可以给列加水平外边距，同时给最后一列移除外边距避免多余空间：

<div className="row mb-4 px-5">
  <div className="col-md-3 bgOrange d-flex align-items-center justify-content-between p-4 me-md-3 mb-3">
    ...
  </div>
  <div className="col-md-3 bgOrange d-flex align-items-center justify-content-between p-4 me-md-3 mb-3">
    ...
  </div>
  <div className="col-md-3 bgOrange d-flex align-items-center justify-content-between p-4 me-md-3 mb-3">
    ...
  </div>
  <div className="col-md-3 bgOrange d-flex align-items-center justify-content-between p-4 mb-3">
    ...
  </div>
</div>

（注：me-md-3 表示在 md 及以上屏幕给列加右侧外边距，mb-3 是小屏幕下的垂直间距）

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