使用自举反应将3个项目彼此对齐

Question

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

我创建了一个postItem组件，该组件只是图像的结构，我正在使用.map从api.js组件从数据中调用它问题是，我使用了Bootstrap网格系统，并使用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

您必须执行类似的操作