AngularJS结合Bootstrap布局中隐藏元素后出现空白间隙的问题排查与解决方案请求

大家好，我正在维护一个老版本的AngularJS项目，想用Bootstrap实现类表格的布局效果——核心需求是当部分统计模块被隐藏时，剩余的模块能自动填补空白，不会留下难看的间隙，但目前遇到了问题，想请各位帮忙分析原因并给出可行的解决方案。

场景与代码说明 #

我当前的页面结构如下：外层是一个带有ng-hide的容器，内部包含多个col-md-3的统计模块，每个模块通过ng-show指令根据配置项（比如xDaysPMEnabled、xDaysCMEnabled）控制是否显示。每个模块内部又拆分为col-md-8的标签区域和col-md-4的RAG状态单元格，具体代码如下：

<div class="barrierLevelEmergency" ng-hide="$parent.tpsd.showBowTie">
  <div class="col-md-12">
    <!-- PM逾期统计模块 -->
    <div class="col-md-3 rag-padding" ng-show="backlogsTotals[0].xDaysPMEnabled">
      <div class="col-md-8">
        <label-item uppercase="false" value="{{(labels | filter: {TextID: '30500'}:true) | firstLabel }}">
      </div>
      <div class="col-md-4">
        <rag-cell rag-val="{{(backlogsTotals | filter: {'BarrierCode': tpsd.stateParams.barrier})[0].xDaysPMCountRag}}">
          {{(backlogsTotals | filter: {'BarrierCode': tpsd.stateParams.barrier})[0].xDaysPMCount}}
        </rag-cell>
      </div>
    </div>
    <!-- CM逾期统计模块 -->
    <div class="col-md-3 rag-padding" ng-show="backlogsTotals[0].xDaysCMEnabled">
      <div class="col-md-8">
        <label-item uppercase="false" value="{{ (labels | filter: {TextID: '30501'}:true) | firstLabel }}">
      </div>
      <div class="col-md-4">
        <rag-cell rag-val="{{(backlogsTotals | filter: {'BarrierCode': tpsd.stateParams.barrier})[0].xDaysCMCountRag}}">
          {{(backlogsTotals | filter: {'BarrierCode': tpsd.stateParams.barrier})[0].xDaysCMCount}}
        </rag-cell>
      </div>
    </div>
    <!-- 紧急项统计模块 -->
    <div class="col-md-3 rag-padding">
      <div class="col-md-8">
        <label-item uppercase="false" value="{{(labels | filter: {TextID: '30502'}:true) | firstLabel }}">
      </div>
      <div class="col-md-4">
        <rag-cell rag-val="{{(backlogsTotals | filter: {'BarrierCode': tpsd.stateParams.barrier})[0].EmRag}}">
          {{(backlogsTotals | filter: {'BarrierCode': tpsd.stateParams.barrier})[0].Emergency}}
        </rag-cell>
      </div>
    </div>
    <!-- 类似的统计模块还有约60个 -->
  </div>
</div>

遇到的问题 #

目前的问题是，当某个col-md-3模块通过ng-show被隐藏后，页面上会留下对应的空白间隙（如下图箭头所指位置），而不是让后续的模块自动左移填充这个空白：
（示意图：箭头指向模块隐藏后遗留的空白区域）

我的疑问 #

1. 为什么会出现这种空白间隙？是Bootstrap栅格系统的特性导致的，还是AngularJS的ng-show/ng-hide指令的工作机制引发的？
2. 有没有优雅的解决方案，既能让显示的模块自动填补隐藏模块的位置，实现流式布局的效果，又能保留每个模块col-md-3的宽度设定？

感谢各位的帮助！

内容来源于stack exchange