Reactjs 如何修复该卡并将3张卡设置在同一行？

我想用这张卡片来显示项目列表。问题是每张卡片都在一行上，不像我预期的那样，一行中有3个项目，并且它不显示为卡片，它在页眉、正文和页脚之间丢失了一些边框。我希望它显示如下

但是它是这样显示的

我的密码在这里

import React, { Component } from 'react';
import { CardDeck } from 'react-bootstrap';
import {
  Card, CardImg, CardText, CardBody,
  CardTitle, CardLink, CardFooter
} from 'reactstrap';
class Portfolio extends Component {
  render() {
    if (this.props.data) {
      var projects = this.props.data.projects.map(function (projects) {
        var projectImage = 'images/portfolio/' + projects.image;
        return (
          <CardDeck >
            <Card >
              <CardImg top width="40%" src={projectImage} alt="Card image cap" />
              <CardBody>
                <CardTitle style={{fontWeight: "bold"}}>{projects.title}</CardTitle>
                <CardText>{projects.category}</CardText>
               
              </CardBody>
              <CardFooter>
                <small className="text-muted">Last updated {projects.time} ago</small>
              </CardFooter>
            </Card>
          </CardDeck>
        )
      })
    }

    return (
      <section id="portfolio">
        <div class="container">
          <div class="row">
              <div class="col-md-12 text-center ">
                <div class="content">
        {/* <div className="twelve columns collapsed"> */}
                    <h1>PROJECTS</h1>
                  <div id="portfolio-wrapper" className="bgrid-quarters s-bgrid-thirds cf">
                    {projects}
                  </div>
                  
                </div>
              </div>
          </div>
        </div>
      </section>
    );
  }
}

export default Portfolio;

import React，{Component}来自'React'；
从'react bootstrap'导入{CardDeck}；
进口{
卡片、卡片、卡片文本、卡片正文、，
CardTitle、CardLink、CardFooter
}来自“反应带”；
类公文包扩展组件{
render（）{
如果（此.props.data）{
var projects=this.props.data.projects.map（函数（项目）{
var projectImage='images/portfolio/'+projects.image；
返回(
{projects.title}
{projects.category}
上次更新{projects.time}是在
)
})
}
返回(
{/*  */}
项目
{项目}
);
}
}
出口违约组合；

---

有人能过来帮我一下吗？我真的很感激

你只用一张牌就做成了一副牌组。为什么你希望有3张卡片，而实际上只有一张卡片在卡片组中定义。你看到我将所有内容都存储在json.file中了吗？这张卡片没有按照我的预期显示，你知道为什么吗？我想我说的仍然有效。我从来没有用过牌，但对我来说，这看起来像是你打开一副牌，添加一张牌，然后关闭一副牌。当你加入你的第二张牌时，你就得到了一副全新的牌。不要打开旧的。你需要在卡片组中做一个循环，而不是在卡片组外。（我可能错了，但我在不同的对象上遇到了这个问题，所以它可能适用于这里。但我并没有给出一个正式的答案，因为我根本不确定它是否正确）你制作了一副只有一张牌的牌组。为什么你希望有3张卡片，而实际上只有一张卡片在卡片组中定义。你看到我将所有内容都存储在json.file中了吗？这张卡片没有按照我的预期显示，你知道为什么吗？我想我说的仍然有效。我从来没有用过牌，但对我来说，这看起来像是你打开一副牌，添加一张牌，然后关闭一副牌。当你加入你的第二张牌时，你就得到了一副全新的牌。不要打开旧的。你需要在卡片组中做一个循环，而不是在卡片组外。（我可能错了，但我在不同的对象上遇到了这个问题，所以它可能适用于这里。但我不会把这作为一个正式的答案，因为我根本不确定它是否正确）