React中Bootstrap卡片g-4间距不生效，求问题排查方案

核心原因：缺少col容器包裹卡片 #

Bootstrap的g-*（ gutter 间距）类是为row的直接子元素col设计的，你的代码里直接把card作为row的子元素，没有用col类的容器包裹，导致g-4的间距规则无法触发。

修改后的代码 #

把每个卡片外层套一个col容器即可：

<div className="container-md">
  <div className="row row-cols-1 row-cols-md-4 g-4 mt-4 mb-4">
    {data &&
      data.items.map((r) => {
        return (
          // 新增col容器包裹card
          <div className="col" key={r.id}>
            <div
              className="card text-center text-white background-color shadow-style card-style"
            >
              <img
                src={`https://image.tmdb.org/t/p/original${r.backdrop_path}`}
                className="card-img-top rounded"
                alt={r.title}
              ></img>
              <div className="card-body body-style">
                <button
                  className="btn button-style text-white"
                  onClick={() => handleDeleteMovie(r.id)}
                >
                  Delete Movie
                </button>
              </div>
            </div>
          </div>
        );
      })}
  </div>
</div>

其他可能的排查点 #

• Bootstrap版本检查：g-*是Bootstrap 5的语法，如果你用的是Bootstrap 4，需要改用mx-*/my-*或者调整row的margin/padding
• 自定义样式冲突：检查你自己定义的card-style、background-color等类，有没有设置margin: 0或者padding: 0覆盖了Bootstrap的间距
• 容器溢出检查：确认container-md没有设置overflow: hidden之类的属性，导致间距被隐藏

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