reactjs - 使用引导程序对齐每个项目旁边的项目

Question

我有这个图片

我已经从 api 加载它们并且我创建了另一个将打印它们的组件。我的问题是我有大约 50 张图片，我希望每 3 张图片在一行中，标题下方，下一张将持有 3 张新图片，但我真的不知道引导程序，似乎无法解决这个问题。

postItem.js

import React from 'react';

function PostItem ({key,src,thumbnailUrl,onClick,title}) {
    return (
    <div>
            <div key={key}>
                    <img src={src} thumbnailUrl={thumbnailUrl} onClick={onClick}></img>
                        <div>{title}</div>    
                </div>
    </div>
    )}

export default PostItem;

post.js：

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

Answer 1

正如您提到的，您已经包含bootstrap在您的项目中，您可以使用col类来指定每个图像的宽度。

您可以在此处阅读有关引导程序网格系统的信息：GRID SYSTEM

您的postItem.js文件应如下所示：

import React from 'react';

function PostItem ({key,src,thumbnailUrl,onClick,title}) {
return (
  <div class="container-fluid text-center">
    <div class="row">

      <div class="col-4"  key={key}>
        <img src={src} thumbnailUrl={thumbnailUrl} onClick={onClick}></img>
        <div>{title}</div>
      </div>

      <div class="col-4" key={key}>
        <img src={src} thumbnailUrl={thumbnailUrl} onClick={onClick}></img>
        <div>{title}</div>
      </div>

      <div class="col-4" key={key}>
        <img src={src} thumbnailUrl={thumbnailUrl} onClick={onClick}></img>
        <div>{title}</div>
      </div>

    </div>
  </div>
)}