Складываем карты Bootstrap 4 в колоду карт

Я использую 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>

person Mark    schedule 27.02.2018    source источник


Ответы (1)


На самом деле нет простого способа сложить card-deck карты в один столбец. Вы можете использовать хак, который вы предложили, чтобы обернуть последние 2 карты. Затем измените отступы и положение карточек вот так.

<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>
person Zim    schedule 27.02.2018
comment
Спасибо. Это все, что я также смог найти. Просто подумал, что, возможно, есть более элегантное решение. - person Mark; 27.02.2018