如何使引导卡(使用ReactJS)在三个已经渲染后移动到新的行

Question

在我的个人投资组合中，我有一个"项目；页面中，我使用引导卡显示不同的项目。我从CardData.js文件中渲染所有值，然后将这些值映射到ProjectCard组件。我希望每行有3张牌，有我目前拥有的设定边距和间距。目前，如果我添加了3张以上的牌，它会将所有的牌合并为一行。

感谢任何帮助或反馈！

• Projects.js(页面组件(：

import '../../App.css'; // main css file //may need to change path
import './projects.css'; // projects css file
import { CardData } from './CardData.js'; // data import for card data
// TODO: Make cards go onto new row when more than three cards are displayed
class Projects extends Component {
render() {
return (
<div id="project-div">
<Navbar navId="navb" logoId="logo" logoText="qprice" logoClass="mr-auto" class="navbar bg-white navbar-expand-md sticky-top navbar-fixed-top shadow ml-auto" />
<h1 id="header-projects" className="font-weight-bold text-uppercase text-center ">Projects</h1>
<div id="card-div">
{CardData.map((item, index) => {
return (
<ProjectCard cardImg={item.cardImg} cardURL={item.cardURL} cardTitle={item.cardTitle} cardText={item.cardText} />
)
})}
</div>
</div>
)
}
}

• Projects.css：

#project-div {
/*background-image: url("../../img/so-white.png");*/
background-color: transparent;
background-image: url("../../img/topography.png");
width: 100vw;
height: 100vh;
}
/* header text */
#header-projects {
margin-top: 50px;
margin-bottom: 50px;
color: #343a40;
}
/* nav links */
.nav a {
color: black;
}
/* div that holds cards */
#card-div {
display: flex;
width: 100%;
}

#portrait {
width: 300px;
display: inline;
border: 5px;
float: left;
margin-right: 15px;
}
.project-cards p {
font-family: "Roboto", sans-serif;
letter-spacing: normal;
}
@media (min-width: 1000px)
{
.project-cards {
max-width: 40rem;
}
}

• ProjectCards.js(实际卡片的组件(：

class ProjectCards extends Component {
render() {
return (
<div className="card mx-auto project-cards rounded border shadow">
<img className="card-img-top" alt="Project cards"src={this.props.cardImg}></img>
<div className="card-body">
<h5 className="card-title font-weight-bold">{this.props.cardTitle}</h5>
<p className="card-text">{this.props.cardText}</p>
<a href={this.props.cardURL} className="btn">See Project</a>
</div>
</div>
)
}
}

• ProjectCard.css：

/* project cards */
.project-cards {
overflow: hidden;
display: inline-block;
text-align: center;
background-color: white;
width: 450px;
height: 450px;
}
.project-cards h1 {
font-size: 1.5rem;
}
/* IMPORTANT: images must be a 2:1 width to height ratio. */
.project-cards img {
height: 50%; 
width: 100%;
}
.project-cards .btn {
color: white;
background-color: #52B788;
}
.project-cards a:hover {
background-color: #42966f;
}

Answer 1

你可以用Bootstrap网格系统做类似的事情：

<Row>
{CardData.map((item, index) => {
return (
<Col sm={4}><ProjectCard cardImg={item.cardImg} cardURL={item.cardURL} cardTitle={item.cardTitle} cardText={item.cardText} /></Col>
)
})}

</Row>

Answer 2

使用Bootstrap网格系统网格在页面上放置对象。例如，如果你想在每行上渲染3张卡，请执行以下

<div className="container">
<div className="row">
<div className="col-12  col-lg-4"><ProjectCard/></div>
<div className="col-12  col-lg-4"><ProjectCard/></div>
<div className="col-12  col-lg-4"><ProjectCard/></div>
<div className="col-12  col-lg-4"><ProjectCard/></div>
<div className="col-12  col-lg-4"><ProjectCard/></div>
<div className="col-12  col-lg-4"><ProjectCard/></div>
</div>
</div>

以上代码将使用col-12将每个ProjectCard放置在移动设备上的1行上，并使用col-lg-4将3个ProjectCard放在桌面上的1列上。

网格系统还将处理任意数量的ProjectCard，因为第四张ProjectCard将转到下一行。

另一点需要记住的是，当使用网格系统时，不要为ProjectCard指定宽度，因为网格系统会为您处理宽度。

更新代码

<div id="card-div" className="row">
{CardData.map((item, index) => {
return (
<div className="col-12  col-lg-4">
<ProjectCard
cardImg={item.cardImg}
cardURL={item.cardURL}
cardTitle={item.cardTitle}
cardText={item.cardText}
/>
</div>
);
})}
</div>;