Bootstrap手风琴展开时相邻组件高度异常问题排查

你遇到的相邻手风琴卡片莫名变高的问题，核心根源是Flex布局的默认对齐规则。

你给.faqcontainer设置了display: flex，而Flex容器默认的align-items属性值是stretch——这个规则会让同一Flex行内的所有子元素（也就是你的.card）自动拉伸高度，匹配该行中最高的那个元素。当你展开某一个手风琴卡片时，它的高度会因为内容显示而增加，同一行的其他卡片就会被强制拉伸到相同高度，哪怕它们的内容并没有展开，这就出现了你看到的“相邻组件无内容展开却高度变化”的现象。

顺带提一句：你HTML里手风琴的data-parent="#accordion"属性目前是无效的，因为页面中没有ID为accordion的容器，但这不是当前高度问题的诱因。

针对这个问题，有几种简单的修复方式，你可以根据需求选择：

方式1：修改Flex容器的对齐规则 #

给.faqcontainer添加align-items: flex-start，让所有卡片都以自身内容高度为准，不再被强制拉伸：

.faqcontainer{ 
  display: flex; 
  flex-wrap: wrap; 
  justify-content: space-between;
  align-items: flex-start; /* 添加这一行 */
}

方式2：单独给卡片设置对齐方式 #

如果不想修改整个容器的对齐规则，也可以给每个.card设置align-self: flex-start，让它们不受容器默认拉伸规则的影响：

.faqcontainer .card{ 
  flex: 0 0 49.5%;
  align-self: flex-start; /* 添加这一行 */
}

方式3：改用Grid布局替代Flex #

如果你觉得Flex的这种行为不太适配你的布局需求，也可以换成Grid布局实现两列并排，Grid默认不会强制拉伸行内元素高度，更适合这种卡片式场景：

.faqcontainer{ 
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1%; /* 替代flex的justify-content: space-between，控制卡片间距 */
}
.faqcontainer .card{
  /* 无需再设置flex相关属性 */
}

如果需要实现手风琴的“互斥展开”功能（即展开一个面板时自动收起其他面板），你需要把所有手风琴卡片放到一个ID为accordion的容器里，比如给.faqcontainer加上id="accordion"，这样之前的data-parent="#accordion"属性就能生效了。

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