如何在React-Bootstrap中根据内容高度对齐卡片内部元素

你可以通过将 Card.Body 改为纵向 flex 布局，让标题区域自动填充剩余高度，即可实现底部信息统一对齐，不需要写死固定 min-height 造成短标题下留白过多的问题。

具体修改步骤 #

1. 给包裹图片和内容的 <div className='view-bulletin-link'> 添加 height: 100% 样式，保证内部元素可以正常继承高度。
2. 给 <Card.Body> 新增样式，设置为纵向 flex 容器：

style={{
  display: 'flex',
  flex-direction: 'column',
  height: '100%'
}}

3. 给 <Card.Title> 新增 flex-grow: 1 属性，让标题区域自动拉伸填充剩余空间，下方的日期、作者、浏览量信息就会被统一挤到容器底部，自然保持水平对齐。

修改后的对应代码段 #

<div className='view-bulletin-link' style={{height: '100%'}}>
  <Card.Img variant='top' src={imageCoverUrl} style={{objectFit: 'cover', height: '15rem', width: '100%', display: 'block'}}/>
  <Card.Body style={{
    display: 'flex',
    flexDirection: 'column',
    height: '100%'
  }}>
    <Card.Title style={{
      fontSize: '1rem',
      flexGrow: 1,
      marginBottom: '0.75rem'
    }}>
      <strong>{bulletin.title}</strong>
    </Card.Title>
    <Card.Text>Created on {moment(bulletin.createdDate).format("DD/MM/YYYY")} <br />By {bulletin.createdBy}</Card.Text>
    <Card.Text>{bulletin.viewCount > 1 ? <>{bulletin.viewCount} Views</> : <>{bulletin.viewCount} View</>}</Card.Text>
  </Card.Body>
</div>

另外注意你原代码中状态按钮的 className 行多了一个多余的右大括号 }，建议删除避免语法报错。

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