使用引导反应将 3 个项目彼此相邻对齐

Question

所以基本上我有这些照片：

我创建了一个 postItem 组件，它只是图像的结构，我使用 .map 从数据中的 api.js 组件调用它 问题是，我使用引导网格系统并使用 row 和 col-lg-4 将每个 3 显示在一行上，但它不起作用。

postItem.js：

import React from 'react';
import 'bootstrap/dist/css/bootstrap.min.css';

function PostItem ({src,thumbnailUrl,onClick,title}) {
    return (
        <div className="container-fluid text-center">
        <div className="row">
          <div className="col-lg-4">
            <img src={src} onClick={onClick} alt="small post"></img>
            <div>{title}</div>
          </div>
        </div>
      </div>
    )}

export default PostItem;

api.js：

<div>
            <div>{newPhotosLocally.map(picture => 
                 <PostItem 
                 key={picture.id}
                 src={picture.thumbnailUrl} 
                 thumbnailUrl={picture.thumbnailUrl} 
                 onClick={() => showPicture(picture.url,picture.id,picture.title)}
                 title={picture.title}/>

            )}</div>
            </div>

希望你能帮助我一整天都被困在这个问题上的家伙

Answer 1

你必须这样做

<div className="col-lg-4 d-flex">
    {newPhotosLocally.map(picture =>
        <PostItem
            key={picture.id}
            src={picture.thumbnailUrl}
            thumbnailUrl={picture.thumbnailUrl}
            onClick={() => showPicture(picture.url, picture.id, picture.title)}
            title={picture.title} />

    )}
</div>

因为原因是每次迭代循环，因此每次都会创建新行。这就是即使我们添加了 display flex 属性你也没有让你的图像不对齐的原因..

现在从图像部分删除不必要的代码。

希望你能得到它。