如何在 Bootstrap 中实现同一行内多个 div 的独立展开与收起-html教程-PHP中文网

本文详解如何在 bootstrap 5 中为同一行的多个服务卡片（div）配置互不干扰的折叠/展开功能，避免点击一个按钮导致所有卡片同步伸缩，并提供 css 优化方案确保布局稳定、视觉一致。

本文详解如何在 bootstrap 5 中为同一行的多个服务卡片（div）配置互不干扰的折叠/展开功能，避免点击一个按钮导致所有卡片同步伸缩，并提供 css 优化方案确保布局稳定、视觉一致。

在使用 Bootstrap 构建响应式服务展示区（如四宫格布局）时，一个常见问题是：当为每个卡片添加 data-bs-toggle="collapse" 功能后，虽然 HTML 结构上已为每个折叠区域分配了唯一 ID（如 #collapseExample1 至 #collapseExample4），但默认情况下，Bootstrap 的 Collapse 插件本身并不会引发其他卡片的高度联动——真正导致“所有 div 同步展开至相同高度”的根本原因，通常是父容器（如 .d-flex 或 .icon-box）设置了固定高度（如 min-height、height: 100%）或 Flex 布局未正确处理内容溢出。

✅ 正确做法是：确保每个可折叠区域的父容器具备自适应高度能力，同时避免强制拉伸行为。

✅ 推荐解决方案（CSS 层面）

为 .d-flex.align-items-stretch 容器（即每列的最外层 div）添加以下样式，以解除高度锁定，允许其随子内容自然伸缩：

/* 针对每项服务卡片的 flex 容器 */
.services .col-xl-3.col-md-6.d-flex.align-items-stretch {
  height: fit-content;     /* 关键：让高度由内容决定 */
  min-height: auto;        /* 覆盖可能存在的全局 min-height 干扰 */
}

/* 可选：统一基础最小高度（提升视觉一致性） */
.services .icon-box {
  min-height: 320px;       /* 根据实际标题+摘要内容预估合理值，如 320px */
  transition: min-height 0.3s ease; /* 平滑过渡（非必需但更专业） */
}

? 提示：height: fit-content 是现代浏览器广泛支持的属性，它使元素高度严格匹配其内容（包括折叠后隐藏的内容区域），从而彻底解决“高度被撑开”问题；而 min-height 则用于保障未展开时的基础视觉均衡，避免卡片因内容长短差异过大而显得参差不齐。

VPS Bootstrap
从零启动全新 VPS，完成 OpenClaw 完整部署，包括备份/恢复及恢复后验证。用于 OpenClaw 部署。

下载

✅ HTML 结构注意事项（关键校验点）

请确认您的每个折叠目标 div.collapse 均拥有全局唯一 ID，且对应按钮的 data-bs-target 精确指向该 ID（您当前代码完全符合此规范，无需修改）：

<!-- 示例：第2个卡片 -->
<button data-bs-toggle="collapse" data-bs-target="#collapseExample2">Ver Más</button>
<div class="collapse" id="collapseExample2">...</div>

✅ Bootstrap 5 默认即支持多实例独立控制，无需 JavaScript 初始化，只要 ID 不重复、结构语义正确，即可天然实现“点击哪个，仅展开哪个”。

⚠️ 常见陷阱与规避建议

❌ 错误：给 .row 或 .container 设置 height: 100% 或 min-height —— 这会间接约束子项高度；
❌ 错误：在 .collapse 元素上设置 display: block !important 或覆盖 max-height 动画逻辑；
✅ 最佳实践：将折叠内容包裹在 .card.card-body 内（如您所做），并确保 .card 无额外高度限制；

✅ 进阶优化：如需展开时平滑动画，可补充 CSS（Bootstrap 5 已内置，但可微调）：

.collapse.show { animation: slideDown 0.35s ease-out; }
@keyframes slideDown { from { opacity: 0; transform: scaleY(0.8); } to { opacity: 1; transform: scaleY(1); } }

通过以上配置，您的四个服务卡片将真正实现「点击即展、互不干扰」的用户体验，同时保持响应式网格布局的稳定性与专业观感。