Bootstrap 4折叠Div布局空白问题：左侧内容被挤到底部求助

核心原因 #

Bootstrap 4的网格系统基于Flexbox实现，而非传统浮动布局，你添加的clearfix仅针对浮动元素生效，对Flex布局完全没用。右侧折叠栏展开时，父容器或列的Flex属性配置不当，才会导致左侧列被挤到下方。

具体修复方案 #

方案1：让列从顶部对齐 #

给包含左右列的row容器添加align-items-start类，强制所有列从容器顶部开始排列，避免因右侧列高度变化引发错位：

<div class="row align-items-start">
  <!-- 左侧内容列 -->
  <div class="col-md-8">
    <!-- 左侧卡片内容 -->
  </div>
  <!-- 右侧折叠列 -->
  <div class="col-md-4">
    <button class="btn btn-primary" data-toggle="collapse" data-target="#collapseList">列表按钮</button>
    <div class="collapse" id="collapseList">
      <!-- 折叠内容 -->
    </div>
  </div>
</div>

方案2：强制列不换行 #

Bootstrap 4的row默认是flex-wrap: wrap，当右侧折叠栏展开后总宽度超过容器时，左侧列会自动换行。给row添加flex-nowrap类可强制列保持在同一行：

<div class="row flex-nowrap">
  <div class="col-md-8">...</div>
  <div class="col-md-4">...</div>
</div>

注意：此方案可能导致内容溢出容器，需给列或折叠内容额外添加overflow-auto类处理滚动。

方案3：给左侧列设置弹性增长属性 #

给左侧列添加flex-grow-1类，确保它能占据容器剩余空间，不会被右侧折叠栏挤到下方：

<div class="row">
  <div class="col-md-8 flex-grow-1">...</div>
  <div class="col-md-4">...</div>
</div>

额外注意事项 #

• 彻底移除针对Flex网格添加的clearfix元素，它不仅无效还可能引发额外布局问题。
• 检查自定义CSS是否修改了row或col的display、flex-direction等属性，这类修改很容易破坏Bootstrap的默认布局逻辑。

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