如何确保Bootstrap卡片始终保持相同尺寸？

问题根源 #

你的代码里存在几个直接导致尺寸失衡的问题：

1. 属性拼写错误：syle应为style，card-img top正确类名是card-img-top
2. 样式写法错误：max-height:50px是行内样式语法，不能直接写在className中
3. 无图片场景缺少占位容器，导致卡片高度塌陷

统一尺寸方案 #

要让所有卡片高度一致，核心是固定卡片整体高度，给图片区域预留固定占位，让内容区域自适应剩余空间。

修改后的代码示例 #

<div className='card' style='height: 300px; display: flex; flex-direction: column;'>
  <!-- 固定图片容器高度，无图时也保留占位 -->
  <div style='height: 80px; overflow: hidden;'>
    <img 
      onError="this.src='https://d27jswm5an3efw.cloudfront.net/app/uploads/2019/07/insert-image-html.jpg'" 
      className="card-img-top" 
      style='height: 100%; width: 100%; object-fit: cover;'
      src={item.img !== undefined ? item.img : "https://d27jswm5an3efw.cloudfront.net/app/uploads/2019/07/insert-image-html.jpg"}
    />
  </div>
  <!-- 内容区域自动填充剩余空间，超出部分滚动 -->
  <div className="card-body" style='flex: 1; overflow-y: auto; padding: 1rem;'>
    <h3 className="card-title">{item.subject}</h3>
    <p className="card-text">{item.description}</p>
    <div className="d-flex flex-column align-items-center">
      <div className='mb-2'>Likes: <strong>{item.likes}</strong></div>
      <div className="d-flex gap-2">
        <button type='button' className='col-4 border bg-danger text-white'>Dislike</button>
        <button type='button' className='col-4 border bg-success text-white'>Like</button>
      </div>
    </div>
  </div>
</div>

关键调整说明 #

• 给卡片设置固定height: 300px，启用flex垂直布局，强制卡片高度统一
• 图片外层容器固定高度，object-fit: cover保证图片比例不变且填充容器，无图时占位不塌陷
• 内容区域设置flex: 1自动占据剩余空间，overflow-y: auto处理过长内容的滚动
• 修正Bootstrap类名和属性拼写错误，用官方flex类优化按钮布局，更符合Bootstrap规范

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