使用 bootstrap react 将 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

你必须这样做

<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 属性 ..

你也没有得到你的图像不对齐的原因

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

希望你能得到它。

使用 bootstrap react 将 3 个项目并排对齐

aligning 3 items next to each others using bootstrap react

grid

flexbox

reactjs

bootstrap-4