css - 将网格系统中的网格彼此相邻设置

Question

嘿，伙计们，我正在使用 UNSPALSH API 做出反应，所以在搜索一个术语时，我正在控制台中检索该术语的详细信息列表，然后在运行地图功能时，我正在我的屏幕中检索图像列表，所以事情是这样的我想制作一列 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

那么我该如何让它正确呢？

Answer 1

a 的父元素'col...应该是 a'row...

在你的情况下，

<div className="row">
  <div className="col-6">
    image goes here
  </div>
  <div className="col-6">
    image goes here
  </div>
</div>

如果你需要它们在 acol-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>