Bootstrap 列垂直间距一致性及折叠面板功能保留问题咨询

看起来你遇到的问题是 Bootstrap 栅格列默认用浮动布局，当列内折叠面板展开/收起时，列高度会变化，导致下方的列“往上填补”空隙，最终垂直间距不一致。同时你还得保留面板的移动、展开和折叠功能，对吧？

下面给你几个可行的解决方案，都不会破坏现有功能：

方案一：给列容器添加固定底部外边距 #

这是最简单直接的方法，给每个包含面板的 col-md-6 容器加统一的底部间距，不管面板高度怎么变，这个间距都会保持稳定。

实现步骤： #

• 自定义 CSS 类：

  .homepageWidget {
      margin-bottom: 2rem; /* 可根据需求调整间距大小 */
  }
  

• 或者用 Bootstrap 内置间距类（Bootstrap 4/5 适用），直接给容器加类：

  <div class="homepageWidget col-md-6 mb-4 contact-widget ui-sortable-handle" order="1," id="reportsWidget" data-description="List of reports">
    <!-- 面板原有内容不变 -->
  </div>
  

• 小提示：如果担心最后一行列的底部间距多余，可以用媒体查询针对性去掉，不过一般场景下影响不大。

方案二：改用 Flexbox 布局替代浮动布局 #

Bootstrap 4+ 支持 Flexbox 栅格，这种布局能更好地控制列排列，避免浮动带来的高度对齐问题，同时保证垂直间距一致。

实现步骤： #

1. 给包含所有列的父 row 开启 Flexbox：

   <div class="row d-flex flex-wrap">
     <!-- 你的所有 col-md-6 容器 -->
   </div>
   

2. 给每个 col-md-6 容器加底部间距（同样可以用自定义 CSS 或内置类）：

   <div class="homepageWidget col-md-6 mb-4 contact-widget ui-sortable-handle" order="1," id="reportsWidget" data-description="List of reports">
     <!-- 面板原有内容不变 -->
   </div>
   

这种方式下，Flexbox 会让每行列高度自动拉伸，但底部固定的外边距会保证列间垂直间距始终一致，同时不会影响 ui-sortable 的拖拽功能，也不会破坏面板的折叠/展开事件。

方案三：用 Bootstrap Card 组件替代 Panel（可选优化） #

如果项目允许调整组件，Bootstrap 3 的 panel 在 Bootstrap 4+ 已被 card 替代，card 自带更友好的间距和布局支持，结合 Flexbox 栅格能更轻松实现需求。不过这属于可选优化，不想改动太多现有代码的话，前两个方案就足够。

注意事项： #

• 不要修改 ui-sortable-handle 类的位置和结构，否则会破坏拖拽移动功能。
• 测试折叠/展开时，确保 data-toggle="collapse" 绑定的目标元素正确，避免样式修改导致事件失效。

这样调整后，不管面板是展开还是收起状态，列之间的垂直间距都会保持一致，原有功能也能正常使用~

备注：内容来源于stack exchange，提问作者Madeirense