映射数据时响应引导卡组件是垂直的
映射数据时响应引导卡组件是垂直的
提问于 2021-06-18 11:22:08
我正在使用React/NextJS，并创建了一个组件，该组件仅在全屏上垂直显示卡片。
在映射数据时，如何使Cards组水平而不是垂直(有4个输入，我希望每行3个)。
我试过使用，但没有运气。也许我在错误的地方做这件事？
卡组件：
import React from "react";
import { Card } from "react-bootstrap";
function VendorCard(props) {
return (
<Card style={{ width: "18rem" }}>
<Card.Body>
<Card.Title>{props.name}</Card.Title>
<Card.Text>{props.country}</Card.Text>
</Card.Body>
<Card.Footer>
<small className='text-muted'>{props.isActive}</small>
</Card.Footer>
</Card>
);
}
export default VendorCard;清单构成部分：
function VendorList(vendor) {
return (
<div>
<VendorCard
key={vendor.id}
name={vendor.name}
country={vendor.country}
classification={vendor.classification}
riskLevel={vendor.riskLevel}
signedDocuments={vendor.signedDocuments}
isActive={vendor.isActive}
/>
</div>
);
}
export default VendorList;HomePage：
import VendorList from "../components/vendor-list";
import vendors from "../dummy-data";
import { Container } from "react-bootstrap";
import "bootstrap/dist/css/bootstrap.css";
function Home() {
return (
<Container style={{ justifyContent: "center" }}>
<div>{vendors.map(VendorList)}</div>
</Container>
);
}
export default Home;任何帮助都将不胜感激！
回答 1
Stack Overflow用户
回答已采纳
发布于 2021-06-19 21:57:13
在react-boostrap中，您必须使用<Row>和<Col>组件。Col值为4，使卡片项得到一行空间的1/3，然后在每一行中自动容纳3。
Home
import React from "react";
import VendorCard from "./VendorCard";
import vendors from "./dummy-data";
import { Container, Row } from "react-bootstrap";
function App() {
return (
<Container>
<Row className="justify-content-md-center">
{vendors.map((vendor) => (
<VendorCard key={vendor.name} {...vendor} />
))}
</Row>
</Container>
);
}
export default App;VendorCard
import React from "react";
import { Card, Col } from "react-bootstrap";
function VendorCard(props) {
return (
<Col xs="4">
<Card>
<Card.Body>
<Card.Title>{props.name}</Card.Title>
<Card.Text>{props.country}</Card.Text>
</Card.Body>
<Card.Footer>
<small className="text-muted">{props.isActive}</small>
</Card.Footer>
</Card>
</Col>
);
}
export default VendorCard;虚拟数据
module.exports = [
{
name: "Cassio",
country: "Brazil",
isActive: false
},
{
name: "Paul",
country: "Brazil",
isActive: false
},
{
name: "Ben",
country: "Brazil",
isActive: false
},
{
name: "Jonnas",
country: "Brazil",
isActive: false
}
];页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/68034273
复制相关文章
相似问题
腾讯云开发者
