如何在Bootstrap的row与col中添加可折叠详情区域？

问题说明 #

我正在构建一个系统，要实现.row .col展开后显示全宽自定义信息栏的效果：展开的信息栏需横跨整个行宽度，下方的列要自动下移到信息栏下方。

测试时用固定宽高的橙色方块模拟列内容，遇到问题：绿色信息栏溢出到右侧列的位置，下方列没有下移，而是和信息栏重叠。

问题原因 #

核心问题在于element-details使用了position: absolute——绝对定位会脱离文档流，不占据空间，导致下方列不会被挤开；同时.row设置了position: relative，使得信息栏相对于整个行定位，直接覆盖右侧列。

解决方案 #

调整结构与样式 #

通过修改布局结构和定位方式，让信息栏回到文档流中并占据整行宽度，迫使下方列自动下移：

修改后的HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">

<div class="row">
  <div class="col">
    <div class="element"></div>
  </div>
  <!-- 全宽信息栏，展开时显示 -->
  <div class="col-12 element-details"></div>
  <div class="col">
    <div class="element"></div>
  </div>
  <div class="col">
    <div class="element"></div>
  </div>
  <div class="col">
    <div class="element"></div>
  </div>
  <div class="col">
    <div class="element"></div>
  </div>
  <div class="col">
    <div class="element"></div>
  </div>
  <div class="col">
    <div class="element"></div>
  </div>
  <div class="col">
    <div class="element"></div>
  </div>
  <div class="col">
    <div class="element"></div>
  </div>
  <div class="col">
    <div class="element"></div>
  </div>
  <div class="col">
    <div class="element"></div>
  </div>
</div>

修改后的CSS

.col {
  height: fit-content;
}

.element {
  display: block;
  background: orange;
  width: 300px;
  height: 300px;
  margin: 20px;
}

.element-details {
  background-color: green;
  height: 50px;
  opacity: 0.5;
  margin-bottom: 20px;
  /* 默认隐藏，可通过JS添加类控制显示 */
  /* display: none; */
}

原理说明 #

1. 利用Bootstrap栅格的col-12类让信息栏占据整行宽度，触发flex容器自动换行
2. 文档流布局的信息栏会占据空间，迫使后续列自动下移到其下方
3. 若需要默认隐藏信息栏，可添加display: none，通过JavaScript控制类的添加/移除实现展开/收起切换

内容的提问来源于stack exchange，提问作者Pascal K.