引导程序网格不显示行

Question

我想为这个公文包在一行中显示图像，但它们显示在一列中。我似乎找不到任何东西表明我做错了这件事。有什么帮助吗？

这是代码：

<div className="portfolio-wrapper">
<div className="container">
<h1 className="text-center py-5">
Portfolio
</h1>
<div className="image-box-wrapper row justify-content-center">
<div className="portfolio-image-box">
<img className="portfolio-image" src={autismapp} alt="Autism Therapy app..."></img>
<div className="overflow"></div>
<FontAwesomeIcon className="portfolio-icon" icon={faSearchPlus} />
</div>

{/*-*/}

<div className="portfolio-image-box">
<img className="portfolio-image" src={rasp} alt="Raspberry Pi Card Scanner..."></img>
<div className="overflow"></div>
<FontAwesomeIcon className="portfolio-icon" icon={faSearchPlus} />
</div>

{/*-*/}

<div className="portfolio-image-box">
<img className="portfolio-image" src={client} alt="Client Application..."></img>
<div className="overflow"></div>
<FontAwesomeIcon className="portfolio-icon" icon={faSearchPlus} />
</div>

{/*-*/}

<div className="portfolio-image-box">
<img className="portfolio-image" src={server} alt="Server Application..."></img>
<div className="overflow"></div>
<FontAwesomeIcon className="portfolio-icon" icon={faSearchPlus} />
</div>

{/*-*/}

<div className="portfolio-image-box">
<img className="portfolio-image" src={github} alt="Github Projects..."></img>
<div className="overflow"></div>
<FontAwesomeIcon className="portfolio-icon" icon={faSearchPlus} />
</div>

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

以下是classNames上的CSS样式。我不确定是什么让它们不显示为一排，但我的一些结束标签可能被搞砸了。这很难说。

.portfolio-image{
width: 15rem !important;
height: 8rem !important;
overflow: hidden;
border: 1px solid var(--primary-pink);
padding: 0 0.5rem;
}

.portfolio-image-box{
position: relative;
margin: 1rem;
overflow: hidden;
}

Answer 1

请提及您在这些className上应用的CSS属性。如果没有这些，就很难找到问题所在。
我认为内部div的宽度设置为100%。尝试设置图像或分区的断点和宽度。

Answer 2

更新：className"公文包图像框"；需要是"；公文包图像框col"；以被识别为网格的一部分。这是因为列应该在行中。