reactjs - 如何固定卡片并将3张卡片放在同一行？

Question

我想使用卡片来显示项目列表。问题是每张卡片都排成一行，而不是像我预期的那样连续 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;

有人可以停下来给我帮助吗？我真的很感激！