实现Bootstrap下拉列表展开时向下推送内容

默认Bootstrap下拉菜单采用绝对定位，会直接覆盖下方内容，要实现展开时推送后续元素（比如你的Dropdown 2），可以通过以下两种方案解决：

方案1：修改现有下拉菜单的CSS定位 #

核心是把下拉菜单从脱离文档流的绝对定位改为占据文档流的静态定位，这样展开时自然会向下推送内容。

修改后的CSS： #

/* 重置下拉菜单的绝对定位，让它回到文档流 */
.dropdown-menu {
  position: static;
  float: none;
  display: none; /* 默认隐藏 */
  border-radius: 0; /* 可选，根据你的样式需求调整 */
}

/* 配合Bootstrap的show类控制菜单显示 */
.dropdown-list-items.show .dropdown-menu {
  display: block;
}

/* 确保下拉容器没有多余间距 */
.dropdown-list-items {
  margin: 0;
  padding: 0;
}

原理说明： #

Bootstrap默认给.dropdown-menu设置了position: absolute，让菜单脱离文档流，不会影响其他元素布局。改成position: static后，菜单会作为常规块级元素占据空间，展开时就会把下方的Dropdown 2往下推。

方案2：改用Bootstrap Collapse组件 #

如果不想修改原有下拉菜单的样式逻辑，更简单的方式是用Collapse组件实现，它天生就是通过展开/收缩占据文档空间来推送内容的。

示例代码： #

<div class="dropdown-mobile-menu">
  <button class="show" type="button" data-bs-toggle="collapse" data-bs-target="#dropdown1">
    <span>Dropdown 1</span>
  </button>
  <div class="collapse" id="dropdown1">
    <ul class="list-group">
      <li class="list-group-item"><a class="dropdown-item" href="#">something 1</a></li>
      <li class="list-group-item"><a class="dropdown-item" href="#">something 2</a></li>
      <li class="list-group-item"><a class="dropdown-item" href="#">something 3</a></li>
    </ul>
  </div>
  <button class="show" type="button" data-bs-toggle="collapse" data-bs-target="#dropdown2">
    <span>Dropdown 2</span>
  </button>
  <div class="collapse" id="dropdown2">
    <ul class="list-group dropdown-theme">
      <li class="list-group-item"><a class="dropdown-item" href="#">else 1</a></li>
      <li class="list-group-item"><a class="dropdown-item" href="#">else 2</a></li>
      <li class="list-group-item"><a class="dropdown-item" href="#">else 3</a></li>
    </ul>
  </div>
</div>

优势： #

不需要额外编写复杂的CSS，直接利用Bootstrap自带的Collapse组件功能，样式也可以通过list-group等类快速适配你的需求，逻辑更清晰。

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