使用引导程序在每个项目旁边对齐项目

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>
)}