Bootstrap中卡片无法保持等尺寸的问题求助

你的卡片出现尺寸不一致的问题，核心原因是图片原始尺寸差异、标题文本长度不同，导致视觉上的高度差。以下是针对性的解决方法：

1. 统一卡片图片尺寸 #

给所有card-img-top设置固定高度，并通过object-fit: cover让图片按比例填充容器，避免拉伸变形：

.card-img-top {
  height: 200px; /* 可根据页面需求调整高度 */
  object-fit: cover;
}

2. 统一标题区域高度 #

给card-title设置最小高度，确保不同长度的标题占用相同垂直空间：

.card-title {
  min-height: 2.5rem; /* 根据字体大小调整，适配标题最多两行的情况 */
}

3. 优化后的完整代码 #

结合你已有的flex布局（保证按钮靠底），修改后的代码如下：

<div class="container">
  <style>
    .card-img-top {
      height: 200px;
      object-fit: cover;
    }
    .card-title {
      min-height: 2.5rem;
    }
  </style>
  <div class="row">
    <div class="col-md-4 mb-3 d-flex align-items-stretch">
      <div class="card shadow h-100">
        <img src="https://rifaikuci.com/management/assets/images/projects/default.jpg" class="card-img-top" alt="Web Development">
        <div class="card-body d-flex flex-column">
          <h3 class="card-title">Web Development</h3>
          <p class="card-text">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Assumenda molestiae quaerat architecto minima, id illum?</p>
          <a href="#" class="btn btn-primary mt-auto align-self-start">Book now</a>
        </div>
      </div>
    </div>
    <div class="col-md-4 mb-3 d-flex align-items-stretch">
      <div class="card shadow h-100">
        <img src="https://websolguru.com/admin/dist/img/services/ios-app-development.jpg" class="card-img-top" alt="IOS Development">
        <div class="card-body d-flex flex-column">
          <h3 class="card-title">IOS Development</h3>
          <p class="card-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident odit nobis voluptatibus dolorem non! Consequuntur dolor corporis nesciunt sint, recusandae corrupti ducimus officiis quae consectetur adipisci unde voluptas, ipsa inventore.</p>
          <a href="#" class="btn btn-primary mt-auto align-self-start">Book now</a>
        </div>
      </div>
    </div>
    <div class="col-md-4 mb-3 d-flex align-items-stretch">
      <div class="card shadow h-100">
        <img src="https://zendenwebdesign.com/wp-content/uploads/2016/02/shutterstock_196510706-3.jpg" class="card-img-top" alt="SEO">
        <div class="card-body d-flex flex-column">
          <h3 class="card-title">SEO</h3>
          <p class="card-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Perspiciatis voluptas vitae pariatur possimus ipsam laborum, dolore asperiores impedit debitis architecto.</p>
          <a href="#" class="btn btn-primary mt-auto align-self-start">Book now</a>
        </div>
      </div>
    </div>
  </div>
</div>

修改后，所有卡片的图片高度统一，标题区域保持一致高度，按钮始终位于卡片底部，整体视觉上实现等尺寸效果。

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