如何让Bootstrap生成的额外品类卡片与前一个产品卡片等高？

问题根源分析 #

• 选择器错误：原JS代码使用#home-card和#home-card-extraID选择器，但实际元素仅设置了class属性，导致无法选中目标元素。
• 未等待图片加载完成：产品卡片包含图片，图片加载前获取的高度数据不准确，导致设置的高度不符合预期。
• 未独立处理不同品类：两个品类的卡片组需要分别计算高度，统一处理会导致其中一组高度匹配失效。

解决方案 #

方案一：改进JavaScript实现（动态匹配高度） #

通过修正选择器、等待资源加载完成、分品类处理，确保高度计算准确。

1. 给每个品类的section添加专属类名，方便精准定位：

<!-- Disposable Vape Section -->
<section class="disposable-vape-section">
  <!-- 原有内容不变 -->
</section>

<!-- Nicotine Salts Section -->
<section class="nicotine-salts-section">
  <!-- 原有内容不变 -->
</section>

2. 替换原postloadjs区块的代码：

$(window).on('load', function() {
  // 处理一次性电子烟品类的卡片高度
  const disposableCards = $('.disposable-vape-section .card');
  if (disposableCards.length > 0) {
    const maxHeight = Math.max(...disposableCards.map(function() {
      return $(this).height();
    }).get());
    disposableCards.height(maxHeight);
  }

  // 处理尼古丁盐品类的卡片高度
  const nicSaltCards = $('.nicotine-salts-section .card');
  if (nicSaltCards.length > 0) {
    const maxHeight = Math.max(...nicSaltCards.map(function() {
      return $(this).height();
    }).get());
    nicSaltCards.height(maxHeight);
  }
});

方案二：纯CSS实现（推荐，无需JS） #

利用Bootstrap的Flexbox布局特性，让卡片自动拉伸至同一高度，同时优化内部布局提升视觉一致性。

1. 给包含卡片的.row添加align-items-stretch类：

<div class="row mt-1 align-items-stretch">
  <!-- 产品卡片和"查看全部"卡片都放在这个row内 -->
</div>

2. 调整"查看全部"卡片的内部结构，确保内容垂直居中并移除冗余链接：

<div class="col-sm-6 col-md-6 col-lg-4 col-xl-3">
  <div class="card h-100 border-0 d-flex flex-column justify-content-center">
    <a href="{% url 'products' %}?filter=category&category=disposable_vape"
       class="stretched-link"></a>
    <div class="card-body pb-0 text-center">
      <div class="btn btn-prod-black">
        <span class="text-uppercase">Shop
          All Disposables
          <span class="icon">
            <i class="fas fa-chevron-right"></i>
          </span>
        </span>
      </div>
    </div>
  </div>
</div>

额外优化建议 #

• 移除原代码中重复的<hr>分隔逻辑，改用Bootstrap的g-4类给.row添加间距，简化布局代码。
• 将产品卡片结构抽成模板片段复用，减少代码冗余，便于后续维护。

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