我正在使用 reactstrap 为我的一个视图设置卡片。最后两张卡片在标题中没有图像,需要将它们堆叠起来。我所做的,但看起来不太好是<Col></Col>
在其中添加一个,但这会与填充混淆。有没有办法我可以简单地做到这一点并让它看起来正确?Reactstrap 基于 BootStrap 4。
这是我的样子:
我所有 5 张卡的代码是:
<Container fluid="true">
<CardDeck>
<Card>
<CardImg className="cardImg" top width="25%" src={custImersion} alt="support immersion program" />
<CardHeader tag="h3">Connect with Customers</CardHeader>
<CardBody>
<CardTitle><NavLink to="/ConnCust">Moneyball</NavLink></CardTitle>
<CardText>Learn from your customers.</CardText>
<CardTitle>Immerse</CardTitle>
<CardText>Go onsite with customers.</CardText>
<Button color="primary"><NavLink to="/supportImmersion">more</NavLink></Button>
</CardBody>
</Card>
<Card>
<CardImg className="cardImg" top width="25%" src={suppImmersion} alt="customer immersion program" />
<CardHeader tag="h3">Connect with Support</CardHeader>
<CardBody>
<CardTitle>Support Immersion</CardTitle>
<CardText>Embed onsite with your CSS team.</CardText>
<CardTitle>Support Queue Enablement</CardTitle>
<CardText>Remotely empower your CSS team.</CardText>
<Button color="primary"><NavLink to="/customerImmersion">more</NavLink></Button>
</CardBody>
</Card>
<Card>
<CardImg className="cardImg" top width="25%" src={Mb} alt="moneyball program" />
<CardHeader tag="h3">Get Training</CardHeader>
<CardBody>
<CardTitle>Online Training</CardTitle>
<CardText>Moneyball is hypothesis-driven learning from customer data through rapid experimentations. Each step is applied iteratively through the 4 phases of problem discovery, solution design, service delivery, and driving business.</CardText>
<CardTitle>Classroom</CardTitle>
<CardText>There are two ways to learn on the Moneyball methodology – online course or an immersive classroom training. Click to learn more.</CardText>
<Button color="primary"><NavLink to="/learnMB">more</NavLink></Button>
</CardBody>
</Card>
<Col>
<Card>
<CardHeader tag="h3">Tools & Resources</CardHeader>
<CardBody>
<CardTitle>Moneyball</CardTitle>
<CardText>
<li>Resource 1</li>
<li>Resource 2</li>
<li>Resource 3</li>
</CardText>
<Button color="primary"><NavLink to="/learnMB">more</NavLink></Button>
</CardBody>
</Card>
<Card>
<CardHeader tag="h3">Events & Links</CardHeader>
<CardBody>
<CardTitle>Moneyball</CardTitle>
<CardText>
<ul>
<li>Events 1</li>
<li>Event 2</li>
<li>Event 3</li>
</ul>
</CardText>
<Button color="primary"><NavLink to="/learnMB">more</NavLink></Button>
</CardBody>
</Card>
</Col>
</CardDeck>
</Container>