twitter-bootstrap - 在卡片组中堆叠 Bootstrap 4 卡片

Question

我正在使用 reactstrap 为我的一个 View 设置卡片。最后 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>

Answer 1

确实没有简单的方法来堆叠 card-deck一栏中的卡片。您可以使用您建议的 hack 来包装最后 2 张卡片。然后调整卡片的填充和位置like this .

<div class="col d-flex flex-column px-0">..</div>

但是，我认为将卡片放入网格中会更好...

https://www.codeply.com/go/kR47vMqdHm

<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>