如何在 Bootstrap 5 中使这一行组件响应？

Question

这应该很简单；我不知道我在忽略什么。我试图让三个 ProjectCard 组件在桌面上显示为单个水平行，在移动设备上显示为单个垂直列。现在它们只是在移动设备上相互叠加，所以我只能在上面看到一个 ProjectCard。我该如何解决这个问题，以便它们在移动设备上位于垂直列中？我将提供卡片本身的代码、它们所属的更大组件以及我的具有相关样式的 CSS 文件。

ProjectCard.js：

import him from '../images/projects/him.jpg'

const placeholder = {
    name: 'placeholder',
    imageUrl: him,
};

export const ProjectCard = () => {
    return(
        
        <div>
            <div className="hovercontainer h-auto w-auto">
                <img src={placeholder.imageUrl} className="projectimage img-fluid"/>
                <div className="overlay">
                    <div className="hovertext">
                        <div id="projectaboutrow">
                            <h5 id="project-title">Project title</h5>
                            <h10 id="project-info" className="mb-2">Card subtitle</h10>
                        </div>

                        <div className="row toolsused">
                            <ul className="list-unstyled d-flex flex-wrap justify-content-center">
                                <li><span className="badge badge-pill badge-secondary">tool 1</span></li>
                                <li><span className="badge badge-pill badge-secondary">tool 2</span></li>
                                <li><span className="badge badge-pill badge-secondary">tool 3</span></li>
                            </ul>
                        </div>

                        <div className="row" id="buttonrow">
                            <div className="col">
                                <button type="button" className="btn btn-primary pinkbutton" href="#">demo</button>
                            </div>
                            <div className="col">
                                <button type="button" className="btn btn-primary pinkbutton" href="#">repo</button>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </div>

    );
};

ProjectPage.js：

import { ProjectCard } from './ProjectCard.js';
import { useSlideInFromBottom } from '../Hooks/UseSlideInFromBottom';


export const ProjectPage = () => {
    useSlideInFromBottom();

    return (
        <div id="projectpage" className="container vh-100 w-100 mx-auto mb-5 slide-in-bottom">

            <div className="row align-items-center mb-4">
                <div className="col-md-4">
                    <h1 id="projectlink">Projects</h1>
                </div>

                <div className="pixelfont col-md-8 align-self-center">
                    <h10>
                        see more at my <a href="#">portfolio gallery</a>!
                    </h10>
                </div>
            </div>

            <div id="projectcards" className="row flex-column flex-md-row row-cols-1 row-cols-md-2 row-cols-lg-3 g-3">
                <div className="col">
                    <ProjectCard />
                </div>
                <div className="col">
                    <ProjectCard />
                </div>
                <div className="col">
                    <ProjectCard />
                </div>
            </div>

        </div>
    );
};

App.css:

/* ============ PROJECT CARD HOVER EFFECT ============= */
.hovercontainer {
  position: absolute;
  width: 100%;

}

.projectimage {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 15px;
}

.overlay {
  border-radius: 15px;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.7);
  overflow: hidden;
  width: 100%;
  height: 0;
  transition: .5s ease;
}

.hovercontainer:hover .overlay {
  height: 100%;
}

.hovertext {
  opacity: 100%;
  color: var(--main-neutral);
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
}


/* ========== PROJECT CARD STYLING ========= */

#project-title {
  font-weight: bold;
  color: var(--main-neutral);
}

#project-info {
  color: var(--main-neutral);
}

.badge-pill {
  background-color: var(--main-neutral);
  color: var(--secondary-neutral);
  margin: 0 5px 5px 0;
  padding: 5px 12px;
  border-radius: 25px;
}

我试过更改图像大小/显示类型，更改 .hovercontainer 的最大宽度，并添加 .img-fluid。我也尝试了很多其他的东西，但我不记得所有的东西。我也玩过不同的行/列配置。我的努力导致卡片的分层堆叠彼此重叠，或者卡片的垂直行在视觉上延伸到我的 AboutMe 组件（在我的 App.js 文件中的 ProjectPage 之后呈现的下一个组件）并与 AboutMe 内容重叠.