使用bootstrap react将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属性，你也没有得到你的图像而没有对齐。

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

希望你能得到它。