Bootstrap卡片flex布局：如何实现仅单张卡片展开且初始等高？

嘿，我来帮你搞定这个问题！你遇到的核心问题是flex布局的自动等高特性——当父容器用flex时，所有子项会强制保持相同高度，所以展开一个卡片时，其他卡片也会被拉长。另外你的JS代码重复冗余，我们可以一起解决这两个问题，同时让代码更简洁。

问题分析 #

1. flex等高联动：你用display:flex让卡片初始等高，但flex的特性是所有子项高度同步，一个变高所有都变高，这就是为什么点击一个按钮所有卡片都“展开”（其实是被拉伸了）。
2. JS代码冗余：你给每个按钮写了单独的事件处理，其实可以用类选择器+DOM关系实现通用逻辑，不管有多少卡片都能复用。

完整解决方案 #

我们分两步走：先实现初始卡片等高，再写通用的展开/收起逻辑。

第一步：修改HTML结构 #

把重复的ID换成统一的类，方便后续JS批量处理：

<div class="container-fluid">
  <h1 class="test-header">Was unsere Kunden sagen</h1>
  <h2 class="test-header2">Das Reshape your Body Konzept hat schon für so viele Menschen funktioniert, es wird auch für dich funktionieren.</h2>
  <div class="row row-padding">
    <div class="col-lg-4 mx-auto mb-4">
      <div class="card">
        <div class="card-body">
          <h4 class="card-title">Andrea<span><i class="fas fa-star stars first_star"></i><i class="fas fa-star stars"></i><i class="fas fa-star stars"></i><i class="fas fa-star stars"></i><i class="fas fa-star stars"></i></span></h4>
          <p class="card-text read-more-wrap">Mir geht es prima, bin immer statt! Das gab es noch nie bei mir und ich habe mich heut gewogen wieder eins weniger also nun 2,5 kg nach einer Woche.<br>
            <span class="toggle-text"> Fantastisch step by step aber endlich funktioniert bei mir etwas, was jahrelang nicht funktioniert hat. Bin sehr zufrieden und fühl mich super. Auf geht´s in die 2. Phase</span>
          </p>
          <button class="btn btn-secondary card-btn toggle-btn">Mehr Lesen</button>
        </div>
      </div>
    </div>
    <div class="col-lg-4 mx-auto mb-4">
      <div class="card">
        <div class="card-body">
          <h4 class="card-title">Daniel<span><i class="fas fa-star stars first_star"></i><i class="fas fa-star stars"></i><i class="fas fa-star stars"></i><i class="fas fa-star stars"></i><i class="far fa-star stars"></i></span></h4>
          <p class="card-text read-more-wrap">Ich muss wirklich sagen das ich sehr skeptisch gegenüber dem Konzept gewesen bin. Wahrscheinlich weil ich schon so viel ausprobiert hatte. Jetzt, nach 8 Wochen habe ich 9,3 Kilo auf der Waage runter. <br>
            <span class="toggle-text"> Ich fühle mich einfach unfassbar gut, habe nicht das geringste Bedürfnis zu naschen oder zwischen den Mahlzeiten zu Essen. Das hatte ich wirklich noch NIE!</span>
          </p>
          <button class="btn btn-secondary card-btn toggle-btn">Mehr Lesen</button>
        </div>
      </div>
    </div>
    <div class="col-lg-4 mx-auto mb-4">
      <div class="card">
        <div class="card-body">
          <h4 class="card-title">Monika<span><i class="fas fa-star stars first_star"></i><i class="fas fa-star stars"></i><i class="fas fa-star stars"></i><i class="fas fa-star stars"></i><i class="fas fa-star stars"></i></span></h4>
          <p class="card-text read-more-wrap">Kurze Info zu meiner Abnehm-Challenge:. Weitere 4 Wochen vorbei und es gibt wieder Gutes zu berichten. Die nächsten 4 Kilos sind verschwunden und das obwohl der ein oder andere "Schlampertag" dabei war.<br>
            <span class="toggle-text"> Das Konzept ist genial. Vor allen Dingen für diejenigen, wie ich, die zwar abnehmen wollen aber mit Sport nicht soviel am Hut haben. </span>
          </p>
          <button class="btn btn-secondary card-btn toggle-btn">Mehr Lesen</button>
        </div>
      </div>
    </div>
  </div>
</div>

第二步：添加基础CSS（隐藏初始文本） #

.toggle-text {
  display: none;
}

第三步：简化后的JS代码（实现等高+独立展开） #

$(document).ready(function() {
  // 1. 初始化卡片等高
  let maxCardHeight = 0;
  // 遍历所有卡片内容区域，找到最高的那个高度
  $(".card-body").each(function() {
    const currentHeight = $(this).outerHeight();
    if (currentHeight > maxCardHeight) {
      maxCardHeight = currentHeight;
    }
  });
  // 给所有卡片设置最小高度，保证初始等高
  $(".card-body").css("min-height", `${maxCardHeight}px`);

  // 2. 通用的展开/收起逻辑
  $(".toggle-btn").click(function() {
    const $currentBtn = $(this);
    // 通过DOM关系找到当前按钮对应的隐藏文本
    const $targetText = $currentBtn.closest(".card-body").find(".toggle-text");
    const btnText = $currentBtn.text();

    if (btnText === "Mehr Lesen") {
      $currentBtn.text("Weniger anzeigen");
      $targetText.slideDown(50);
      // 展开后移除最小高度，让卡片可以自由增高
      $currentBtn.closest(".card-body").css("min-height", "auto");
    } else {
      $currentBtn.text("Mehr Lesen");
      $targetText.slideUp(50);
      // 收起后恢复最小高度，回到等高状态
      $currentBtn.closest(".card-body").css("min-height", `${maxCardHeight}px`);
    }
  });
});

代码解释 #

• 初始等高实现：页面加载时计算所有.card-body的高度，把最大值设为它们的min-height，这样初始状态所有卡片高度一致，又不会像flex那样强制同步高度变化。
• 独立展开逻辑：用closest(".card-body")定位当前按钮所在的卡片容器，再用find(".toggle-text")找到对应要显示/隐藏的文本，这样不管有多少卡片，都只用一段代码就能处理。
• 状态切换：展开时把卡片的min-height设为auto，让卡片可以自由增高；收起时恢复初始的最大高度，回到等高状态。

这样修改后，就能实现你想要的效果：初始卡片高度相同，点击哪个按钮就只展开对应的卡片，而且代码简洁很多，后续加新卡片也不用再写重复的JS啦！

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