如何让React-bootstrap的Card组件保持相同高度？

一、实现卡片等高 #

React-Bootstrap的CardGroup本身基于Flexbox，理论上能让子卡片等高，但需确保Card.Body自动填充剩余空间，避免文本长度差异导致卡片高度不一致。

调整方案：

• 给Card.Body添加d-flex flex-column justify-content-between类，让卡片内容自动分布，底部按钮对齐，同时Card.Body会占满卡片剩余高度
• 无需手动给Card设置flex:1，CardGroup已内置该逻辑

二、统一图片尺寸 #

给Card.Img设置固定高度，搭配object-fit: cover保证图片比例不变，避免拉伸变形。

修改后的完整代码 #

JSX部分：

<CardGroup>
  <Card className="card">
    <Card.Img variant="top" src={Weather} className="card-img" />
    <Card.Body className="d-flex flex-column justify-content-between">
      <div>
        <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>
      </div>
      <Button variant="primary">Go somewhere</Button>
    </Card.Body>
  </Card>

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

  <Card className="card">
    <Card.Img variant="top" src={Quiz} className="card-img" />
    <Card.Body className="d-flex flex-column justify-content-between">
      <div>
        <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>
      </div>
      <Button variant="primary">Go somewhere</Button>
    </Card.Body>
  </Card>
</CardGroup>

CSS部分：

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

.card-img {
  height: 200px; /* 可根据需求调整高度 */
  object-fit: cover; /* 保持图片比例，裁剪多余部分 */
  /* 若需完整显示图片，可改用object-fit: contain，但会留空白 */
}

补充说明 #

1. d-flex flex-column让Card.Body内部变为垂直Flex布局，justify-content-between将文本区和按钮分别推至顶部、底部，同时让Card.Body占满卡片剩余高度，确保所有卡片等高
2. object-fit: cover保证图片按比例填充容器，避免变形；若需保留完整图片内容，可替换为object-fit: contain
3. 移除了Card上的style={{flex:1}}，避免与CardGroup内置的Flex逻辑冲突

内容的提问来源于stack exchange，提问作者PhuongHoang68