Я использую reactstrap для настройки карт для одного из моих представлений. Последние 2 карточки не имеют изображений в шапке и нужно их сложить. Что я сделал, но выглядит не очень хорошо, так это добавил туда <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>