Question

大家好，我正在使用UNSPALSH API进行响应，因此在搜索术语时，我在控制台中检索了该术语的详细信息列表，然后在运行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;
}

但是每行只给我一张图像，这是输出https://ibb.co/343Rhb2的ss

那我该如何纠正呢？

Answer 1

'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>

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

1 个答案: