我想使用卡片来显示项目列表。问题是每张卡片都排成一行,而不是像我预期的那样连续 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;
有人可以停下来给我帮助吗?我真的很感激!