本文讲解如何使用 bootstrap 5 的 collapse 组件，让同一行中的多个服务卡片各自独立展开/收起，避免点击一个按钮导致所有卡片同步伸缩，并通过 css 精确控制高度行为。
本文讲解如何使用 bootstrap 5 的 collapse 组件，让同一行中的多个服务卡片各自独立展开/收起，避免点击一个按钮导致所有卡片同步伸缩，并通过 css 精确控制高度行为。
在 Bootstrap 中实现「同一行内多个 div 独立展开/折叠」的关键，在于确保每个折叠区域（.collapse）的 DOM 结构完全隔离，且其父容器不因其他折叠项的状态变化而发生意外的高度重排。你提供的代码结构本身已基本正确：每个 .collapse 元素拥有唯一 id（如 #collapseExample1），对应按钮的 data-bs-target 也一一匹配——这正是 Bootstrap 实现个体控制的前提。
但实际中仍可能出现「所有 div 同步撑高」的现象，根本原因通常在于父容器（如 .d-flex 或 .icon-box）设置了固定高度、min-height 不足，或启用了 align-items: stretch 导致子元素被强制拉伸。尤其当多个 .collapse 同时处于展开状态时，Flex 容器会按最高子项统一拉伸所有列，造成视觉上的“联动”错觉。
✅ 正确解决方案如下：
-
移除影响高度继承的冗余样式
检查 .icon-box 或外层 .d-flex 是否存在 height: 100%、min-height: auto 或 flex: 1 等可能干扰自然流式布局的规则。推荐显式重置：
.icon-box {
display: flex;
flex-direction: column;
height: auto; /* 确保不锁定高度 */
}
/* 关键：解除 Flex 容器对子项高度的强制拉伸 */
.d-flex.align-items-stretch > .icon-box {
align-self: flex-start; /* 让每张卡片仅包裹自身内容 */
}
-
为折叠区域添加安全高度约束（推荐）
使用 height: fit-content 配合合理 min-height，既保障展开时内容自然撑开，又防止初始状态下卡片高度塌陷影响网格对齐：
.icon-box .collapse {
height: fit-content;
transition: height 0.3s ease, opacity 0.3s ease;
}
/* 可选：为未展开状态预留基础高度，保持视觉一致性 */
.icon-box {
min-height: 360px; /* 根据标题、描述等静态内容预估最小高度 */
}
-
增强可访问性与用户体验（最佳实践）
- 为每个折叠按钮添加动态文本提示（如“Ver Más” → “Ver Menos”），提升语义化：
<button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseExample1" aria-expanded="false" aria-controls="collapseExample1" data-bs-toggle-text="Ver Menos"> Ver Más </button>
并配合简短 JS 切换文案：
document.querySelectorAll('[data-bs-toggle="collapse"]').forEach(btn => { btn.addEventListener('click', function() { const isExpanded = this.getAttribute('aria-expanded') === 'true'; this.textContent = isExpanded ? 'Ver Menos' : 'Ver Más'; }); });
- 为每个折叠按钮添加动态文本提示（如“Ver Más” → “Ver Menos”），提升语义化：
⚠️ 注意事项：
- 切勿给 .collapse 直接设 height: 0 或 overflow: hidden —— Bootstrap 已内置 max-height 过渡动画，手动覆盖易破坏原生行为；
- 若使用 data-bs-parent（用于手风琴效果），务必删除该属性，否则会强制互斥折叠；
- 在移动端测试时，注意 min-height 值需适配小屏幕内容长度，可结合媒体查询优化：
@media (max-width: 768px) { .icon-box { min-height: 320px; } }
总结：独立折叠的核心不是 JavaScript 逻辑改造，而是厘清 Bootstrap 的 DOM 绑定机制 + 精准控制 Flex 容器与子项的高度行为。只要确保 data-bs-target 唯一指向、父容器不强制拉伸、折叠区使用 fit-content 自适应，即可零 JS 实现专业级响应式服务卡片交互。
