Vue项目中Bootstrap Collapse展开时误改变其他卡片尺寸问题

问题原因 #

你的卡片布局应该是使用了Bootstrap的flex布局（比如row容器），flex布局默认的align-items: stretch会让同一行内的所有卡片高度强制保持一致，当某张卡片展开子任务高度增加时，其他卡片会被自动拉伸匹配高度。

解决方案 #

方法1：修改父容器的对齐方式 #

如果卡片的父容器是row，给它添加align-items-start类，让所有卡片高度由自身内容决定，不再强制拉伸：

<div class="row align-items-start">
  <!-- 你的卡片组件放在这里 -->
</div>

方法2：给单个卡片设置独立对齐 #

如果不想修改全局父容器，直接给卡片的最外层div添加align-self-start类，让该卡片不受flex布局的拉伸影响：

<div class="card card-body text-center m-3 align-self-start" style="max-width: 500px;">
  <!-- 卡片内部内容 -->
</div>

方法3：检查并移除强制高度样式 #

确保卡片或其父元素没有设置height: 100%、min-height: 100%这类强制占满高度的样式，这类样式也会导致卡片被拉伸。

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