所以我在react中使用了bootstrap，并且我试图在我的卡片之间有一个间隙。它通常工作得很好。但是在这个例子中，我不知道为什么它不工作。我试着在className中添加g-4来产生间隙。我的代码可能出了什么问题？

<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 (
                <div
                  key={r.id}
                  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>