如何解决如何使用React Bootstrap连续设置卡
我想在项目中使用react-bootstrap
添加卡。我使用了react-bootstrap中的Grid和CardDeck选项。但是所有卡都放在一列(like this)中。但是我希望这些卡片并排放置,而不是排成一行。(I want my output like this image)。
这是卡片部分的代码
import Card from 'react-bootstrap/Card';
const Course = (props) => {
const {title,price,details,img} = props;
return (
<div>
<div className="col-md-4 col-12 mt-5 mx-auto">
<Card>
<Card.Img variant="top" src={img} />
<Card.Body>
<Card.Title>{title}</Card.Title>
<Card.Title>{price}</Card.Title>
<Card.Text>
{
details
}
</Card.Text>
</Card.Body>
</Card>
</div>
</div>
);
};
export default Course;
我在哪里传递值
import React from "react";
import fakeData from "../FakedData/FakeData";
import Course from "../Course/Course";
import CardDeck from 'react-bootstrap/CardDeck';
const Home = () => {
return (
<div>
<div className="container">
<div className="row">
<CardDeck>
{fakeData.map((data) => {
return (
<Course
key={data.id}
title={data.title}
price={data.price}
details={data.details}
img={data.img}
/>
);
})}
</CardDeck>
</div>
</div>
</div>
);
};
export default Home;
解决方法
我不尝试这样做,这是模数运算的旧方法,应该可以工作,但是没有响应性
const Home = () => {
const numInRow = 4;
return (
<div>
<div className="container">
<div class="d-flex justify-content-center"> // <---- div first row
{fakeData.map((data,idx) => { //<--- note the idx
return (
<Course
key={data.id}
title={data.title}
price={data.price}
details={data.details}
img={data.img}
/>
{idx % numInRow === 0 && </div><div class="d-flex justify-content-center">} // <--- use modulo to close row and open a new one
);
})}
</div> //<-- div last row
</div>
</div>
);
};
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。