如何让Bootstrap 4卡片头部始终保持相同高度？

针对你遇到的Bootstrap 4定价卡片头部高度不一致的问题，这里有几个无需固定高度的动态适配方案，能完美适配不同文本长度和屏幕尺寸：

方案一：纯CSS Flexbox实现（推荐） #

利用Bootstrap 4本身的Flex布局特性，通过自定义CSS让卡片头部自动匹配最高高度：

/* 让卡片成为flex列布局，确保内部元素按垂直方向排列 */
.card-deck .card {
  display: flex;
  flex-direction: column;
}

/* 防止头部被内容压缩，同时可选添加居中对齐优化视觉效果 */
.card-deck .card-header {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

原理：card-deck本身就是Flex容器，所有卡片会被自动拉伸至等高。将卡片设置为flex-column后，卡片头部会根据自身内容自动调整高度，而因为卡片总高度一致，所有头部会自动匹配最高的那个的高度。这个方案无需JS，完全靠CSS实现，响应式友好。

方案二：JavaScript动态计算高度 #

如果需要更精准的控制，或者要兼容一些老旧浏览器，可以用JS动态计算并设置头部高度：

document.addEventListener('DOMContentLoaded', function() {
  const adjustCardHeights = () => {
    const cardHeaders = document.querySelectorAll('.card-header');
    let maxHeight = 0;

    // 先重置所有头部高度，获取真实的内容高度
    cardHeaders.forEach(header => {
      header.style.height = 'auto';
      maxHeight = Math.max(maxHeight, header.offsetHeight);
    });

    // 把最大高度统一应用到所有头部
    cardHeaders.forEach(header => {
      header.style.height = `${maxHeight}px`;
    });
  };

  // 页面加载完成后初始化执行
  adjustCardHeights();

  // 监听窗口大小变化，屏幕尺寸改变时重新计算高度
  window.addEventListener('resize', adjustCardHeights);
});

原理：先遍历所有卡片头部，找到高度最高的那个值，再将这个高度统一设置给所有头部。同时监听窗口resize事件，在屏幕尺寸变化时重新计算，保证始终适配不同分辨率。

方案三：改用Bootstrap Grid布局替代Card-Deck #

如果你愿意调整HTML结构，用Bootstrap的Grid系统也能轻松实现等高卡片：

<div class="container">
  <div class="row">
    <!-- 第一个卡片 -->
    <div class="col-md-4 mb-4">
      <div class="card h-100 d-flex flex-column box-shadow">
        <div class="card-header d-flex align-items-center justify-content-center">
          <h4 class="my-0 font-weight-normal">This is a really long header that is going to cause problem.</h4>
        </div>
        <div class="card-body flex-grow-1">
          <!-- 卡片内容区域 -->
          <h1 class="card-title pricing-card-title">$0 <small class="text-muted">/ mo</small></h1>
          <ul class="list-unstyled mt-3 mb-4">
            <li>10 users included</li>
            <li>2 GB of storage</li>
            <li>Email support</li>
            <li>Help center access</li>
          </ul>
          <button type="button" class="btn btn-lg btn-block btn-outline-primary">Sign up for free</button>
        </div>
      </div>
    </div>

    <!-- 第二个卡片 -->
    <div class="col-md-4 mb-4">
      <div class="card h-100 d-flex flex-column box-shadow">
        <div class="card-header d-flex align-items-center justify-content-center">
          <h4 class="my-0 font-weight-normal">Pro</h4>
        </div>
        <div class="card-body flex-grow-1">
          <!-- 卡片内容区域 -->
          <h1 class="card-title pricing-card-title">$15 <small class="text-muted">/ mo</small></h1>
          <ul class="list-unstyled mt-3 mb-4">
            <li>20 users included</li>
            <li>10 GB of storage</li>
            <li>Priority email support</li>
            <li>Help center access</li>
          </ul>
          <button type="button" class="btn btn-lg btn-block btn-primary">Get started</button>
        </div>
      </div>
    </div>

    <!-- 第三个卡片 -->
    <div class="col-md-4 mb-4">
      <div class="card h-100 d-flex flex-column box-shadow">
        <div class="card-header d-flex align-items-center justify-content-center">
          <h4 class="my-0 font-weight-normal">Enterprise</h4>
        </div>
        <div class="card-body flex-grow-1">
          <!-- 卡片内容区域 -->
          <h1 class="card-title pricing-card-title">$29 <small class="text-muted">/ mo</small></h1>
          <ul class="list-unstyled mt-3 mb-4">
            <li>30 users included</li>
            <li>15 GB of storage</li>
            <li>Phone and email support</li>
            <li>Help center access</li>
          </ul>
          <button type="button" class="btn btn-lg btn-block btn-primary">Contact us</button>
        </div>
      </div>
    </div>
  </div>
</div>

原理：用col-md-4创建等宽列，h-100让卡片占满列的高度，d-flex flex-column让卡片内部使用Flex布局，flex-grow-1让卡片内容区域自动填充剩余空间，从而保证头部高度一致。

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