<分区>
标签 css bootstrap-4
<分区>
嘿伙计们，我正在研究与 UNSPALSH API 的 react ，所以在搜索术语时，我正在控制台中检索术语的详细信息列表，然后在运行 map 功能时，我正在检索屏幕中的图像列表，因此事情是我想制作一列 12 个网格，并想在每一行中分配 2 个彼此相邻的图像。 所以我写了一段代码
<div className="row">
<div className="col-lg-12">
<div className="image-list col-lg-6">
{images}
</div>
</div>
</div>
CSS文件
.image-list img{
width: 90%;
height: 50vh;
margin-bottom: 40px;
}
但它每行只给我一个图像，这里是输出的 ss https://ibb.co/343Rhb2
那么我该如何让它正确呢？
最佳答案
'col... 的父元素应该是 'row...
在你的情况下，
<div className="row">
<div className="col-6">
image goes here
</div>
<div className="col-6">
image goes here
</div>
</div>
如果你在 col-12 中需要它们，那么
<div className="row">
<div className="col-12">
<div className="row">
<div className="col-6">
image goes here
</div>
<div className="col-6">
image goes here
</div>
</div>
</div>
</div>
关于css - 将网格系统中的网格设置为彼此相邻，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56264778/