我现在有 6 张卡片,我想在一行上对齐 3 张卡片,所以我们总共有 2 行。
我的代码在这里https://codesandbox.io/s/card-tykr9?file=/src/App.js
有人可以停下来寻求帮助吗?
我现在有 6 张卡片,我想在一行上对齐 3 张卡片,所以我们总共有 2 行。
我的代码在这里https://codesandbox.io/s/card-tykr9?file=/src/App.js
有人可以停下来寻求帮助吗?
您可以使用flexbox
代替grid layout
来实现相同的结果。
import React from "react";
import "./styles.css";
import {
Card,
CardImg,
CardText,
CardBody,
CardTitle,
CardFooter
} from "reactstrap";
const css = {
grid: {
display: "flex",
flexWrap: "wrap",
justifyContent: "center"
}
};
export default function App() {
const data = [
{
avatar: "https://placehold.it/269x200",
text: "Last updated 1 ago",
title: "3D",
cardText: "web applicatio"
},
{
avatar: "https://placehold.it/269x200",
text: "Last updated 4 ago",
title: "3D",
cardText: "web applicatio"
},
{
avatar: "https://placehold.it/269x200",
text: "Last updated 6 ago",
title: "3D",
cardText: "web applicatio"
},
{
avatar: "https://placehold.it/269x200",
text: "Last updated 1 ago",
title: "3D",
cardText: "web applicatio"
},
{
avatar: "https://placehold.it/269x200",
text: "Last updated 4 ago",
title: "3D",
cardText: "web applicatio"
},
{
avatar: "https://placehold.it/269x200",
text: "Last updated 6 ago",
title: "3D",
cardText: "web applicatio"
},
{
avatar: "https://placehold.it/269x200",
text: "Last updated 4 ago",
title: "3D",
cardText: "web applicatio"
},
{
avatar: "https://placehold.it/269x200",
text: "Last updated 6 ago",
title: "3D",
cardText: "web applicatio"
}
];
return (
<div style={css.grid}>
{data.map(({ avatar, title, text, cardText }, index) => (
<div style={{ margin: 0, width: "33%" }}>
<Card style={{ margin: 5 }}>
<CardImg top width="100%" src={avatar} alt="Card image cap" />
<CardBody style={{ padding: 15 }}>
<CardTitle style={{ fontWeight: "bold" }}>{title}</CardTitle>
<CardText>{cardText}</CardText>
</CardBody>
<CardFooter style={{ padding: 15 }}>
<small className="text-muted">{text}</small>
</CardFooter>
</Card>
</div>
))}
</div>
);
}
查看此代码。我在 bootstrap4 中实现了这段代码。
<div class="container">
<div class="row ">
<h4>we can use "card-deck" for same height and "card-group" to remove margins and padding between cards</h4>
<div class="card col-xl-4 col-lg-4 col-md-4 col-sm-4 col-4 m">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
<div class="card col-xl-4 col-lg-4 col-md-4 col-sm-4 col-4">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
<div class="card col-xl-4 col-lg-4 col-md-4 col-sm-4 col-4">
<div class="card-body">
<h5 class="card-title" id="harry">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
<div class="card col-xl-4 col-lg-4 col-md-4 col-sm-4 col-4">
<div class="card-body">
<h5 class="card-title" id="harry">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
<div class="card col-xl-4 col-lg-4 col-md-4 col-sm-4 col-4">
<div class="card-body">
<h5 class="card-title" id="harry">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
<div class="card col-xl-4 col-lg-4 col-md-4 col-sm-4 col-4">
<div class="card-body">
<h5 class="card-title" id="harry">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
</div>
</div>
结果: 上述代码的输出