我想在下图中显示 3 张卡片
但是,我不知道下面的代码有什么问题:https ://codesandbox.io/s/little-glitter-cge8r?file=/src/App.js 。有人可以帮我吗?
我想在下图中显示 3 张卡片
但是,我不知道下面的代码有什么问题:https ://codesandbox.io/s/little-glitter-cge8r?file=/src/App.js 。有人可以帮我吗?
这是使用flex
框的修复:
输出:
import React from "react";
import "./styles.css";
import {
Card,
CardImg,
CardText,
CardBody,
CardTitle,
CardFooter
} from "reactstrap";
import avatar from "./Original3.JPG";
export default function App() {
return (
<div
style={{
display: "flex"
}}
>
<div class="col-4">
<Card
style={{
padding: "5px"
}}
>
<CardImg top width="100%" src={avatar} alt="Card image cap" />
<CardBody>
<CardTitle style={{ fontWeight: "bold" }}>3D</CardTitle>
<CardText>web application</CardText>
</CardBody>
<CardFooter>
<small className="text-muted">Last updated 1 ago</small>
</CardFooter>
</Card>
</div>
<div class="col-4">
<Card
style={{
padding: "5px"
}}
>
<CardImg top width="100%" src={avatar} alt="Card image cap" />
<CardBody>
<CardTitle style={{ fontWeight: "bold" }}>3D</CardTitle>
<CardText>web application</CardText>
</CardBody>
<CardFooter>
<small className="text-muted">Last updated 1 ago</small>
</CardFooter>
</Card>
</div>
<div class="col-4">
<Card
style={{
padding: "5px"
}}
>
<CardImg top width="100%" src={avatar} alt="Card image cap" />
<CardBody>
<CardTitle style={{ fontWeight: "bold" }}>3D</CardTitle>
<CardText>web application</CardText>
</CardBody>
<CardFooter>
<small className="text-muted">Last updated 1 ago</small>
</CardFooter>
</Card>
</div>
</div>
);
}
您需要在卡片的父 div 上应用样式,就像
<div class="row" style={{display:'flex',flexWrap:'noWrap'}}>