Twitter bootstrap 在卡片组中堆叠引导4张卡片

我正在使用reactstrap为我的一个视图设置卡。最后2张卡片的标题中没有图像，需要将它们堆叠起来。我所做的，但看起来不太好的是在其中添加一个

，但这会弄乱填充。有没有一种方法可以简单地做到这一点，并让它看起来正确？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>

联系客户
金钱球
向你的客户学习。
沉浸在
与客户一起到现场。
更多
连接支架
支架浸入
与您的CSS团队现场嵌入。
支持队列启用
远程授权您的CSS团队。
更多
受训
在线培训
Moneyball是通过快速实验从客户数据中进行假设驱动的学习。每一步都在问题发现、解决方案设计、服务交付和推动业务的4个阶段中迭代应用。
教室
有两种学习Moneyball方法的方法-在线课程或沉浸式课堂培训。单击以了解更多信息。
更多
工具和资源
金钱球
资源1
资源2
资源3
更多
活动与链接
金钱球

事件1
事件2
事件3

更多

要将

卡片组

卡片堆叠在一列中，确实没有简单的方法。你可以用你建议的方法来包装最后两张牌。然后调整卡片的填充和位置

。

然而，我认为你最好还是把牌放在格子里

1卡片标题
这是一张较长的卡片，下面的支持文本是附加内容的自然引入。这个内容有点长
上次更新是在3分钟前

2卡片标题
这是一张较长的卡片，下面的支持文本是附加内容的自然引入。这个内容有点长
上次更新是在3分钟前

3卡片标题
这是一张较长的卡片，下面的支持文本是附加内容的自然引入。这个内容有点长
上次更新是在3分钟前

4卡片标题
这是一张较长的卡片，下面的支持文本是附加内容的自然引入。这个内容有点长
上次更新是在3分钟前

谢谢。这也是我所能找到的。我只是想也许有一个更优雅的解决方案。

<div class="container">
    <div class="row">
        <div class="col-4">
            <div class="card mb-4">
                <img class="card-img-top img-fluid" src="//placehold.it/500x280" alt="Card image cap">
                <div class="card-block">
                    <h4 class="card-title">1 Card title</h4>
                    <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
                    <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
                </div>
            </div>
        </div>
        <div class="col-4">
            <div class="card mb-4">
                <img class="card-img-top img-fluid" src="//placehold.it/500x380" alt="Card image cap">
                <div class="card-block">
                    <h4 class="card-title">2 Card title</h4>
                    <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
                    <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
                </div>
            </div>
        </div>
        <div class="col-4">
            <div class="card mb-4">
                <div class="card-block">
                    <h4 class="card-title">3 Card title</h4>
                    <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
                    <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
                </div>
            </div>
            <div class="card mb-4">
                <div class="card-block">
                    <h4 class="card-title">4 Card title</h4>
                    <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
                    <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
                </div>
            </div>
        </div>
    </div>
</div>