如何获得相同大小的 React-bootstrap 卡？

Question

I am using React-bootstrap for my app, specifically the Card& CardGroup components. I want help please with making the cards all the same height.

JSX component:

      <Card style={{flex: 1}} className="card">
        <Card.Img variant="top" src={Weather} />
        <Card.Body>
          <Card.Title>Card title</Card.Title>
          <Card.Text>
            This is a wider card with supporting text below as a natural lead-in
            to additional content. This content is a little bit longer.
          </Card.Text>
          <Button variant="primary">Go somewhere</Button>
        </Card.Body>
      </Card>

      <Card style={{flex: 1}} className="card">
        <Card.Img variant="top" src={Scheduler} />
        <Card.Body>
          <Card.Title>Card title</Card.Title>
          <Card.Text>
            This card has supporting text below as a natural lead-in to
            additional content.{' '}
          </Card.Text>
          <Button variant="primary">Go somewhere</Button>
        </Card.Body>  
      </Card>

      <Card style={{flex: 1}} className="card">
        <Card.Img variant="top" src={Quiz} />
        <Card.Body>
          <Card.Title>Card title</Card.Title>
          <Card.Text>
            This is a wider card with supporting text below as a natural lead-in
            to additional content. This card has even longer content than the
            first to show that equal height action.
          </Card.Text>
          <Button variant="primary">Go somewhere</Button>
        </Card.Body>
      </Card>

    </CardGroup>
  )

Related CSS:

.card {
padding: 30px;
margin-top:59px;
}

Here's what it currently looks like enter image description here

I have tried using max-height and min-height, but it didnt work. I learned react a month ago and thus are trying to get acclimated with it. I would truly appreciate help on how to make these cards all the same height/size, regardless of the height of the photos. Or how to make the photo sizes the same as well.

Thank you so much

Answer 1

Not sure if I understand the desired result, but if the goal is to:

make these cards all the same height/size, regardless of the height of the photos

It seems that Card.Body is already taking the remaining space of Card , and it could be styled to align the text and button to the bottom, making the whole CardGroup aligned vertically.

The below example adds some bootstrap classes for this as a basic solution.

Live demo of the simplified example on: stackblitz

Example:

<CardGroup>
  <Card className="card d-flex flex-column">
    <Card.Img src={Weather} />
    <Card.Body className="d-flex flex-column justify-content-end align-items-center">
      <Card.Title>Card title</Card.Title>
      <Card.Text>
        This is a wider card with supporting text below as a natural lead-in to
        additional content. This content is a little bit longer.
      </Card.Text>
      <Button variant="primary">Go somewhere</Button>
    </Card.Body>
  </Card>

  <Card className="card d-flex flex-column">
    <Card.Img src={Scheduler} />
    <Card.Body className="d-flex flex-column justify-content-end align-items-center">
      <Card.Title>Card title</Card.Title>
      <Card.Text>
        This card has supporting text below as a natural lead-in to additional
        content.
      </Card.Text>
      <Button variant="primary">Go somewhere</Button>
    </Card.Body>
  </Card>

  <Card className="card d-flex flex-column">
    <Card.Img src={Quiz} />
    <Card.Body className="d-flex flex-column justify-content-end align-items-center">
      <Card.Title>Card title</Card.Title>
      <Card.Text>
        This is a wider card with supporting text below as a natural lead-in to
        additional content. This card has even longer content than the first to
        show that equal height action.
      </Card.Text>
      <Button variant="primary">Go somewhere</Button>
    </Card.Body>
  </Card>
</CardGroup>