Jquery 引导面板折叠创建间隙

我有两列，每列有两个面板。每列为50%col-md-6，内部有2个面板，具有折叠功能。“折叠”效果很好，但我遇到的问题是，如果展开面板，左下角的div移动得太低，在面板1和面板3之间会产生巨大的间隙

这就是展开面板1时发生的情况。1和3之间的差距无缘无故有很多空白。我似乎想不出一个办法来解决它

panel1  |  panel 2
        |
        |  panel 4
        |
panel3  |

---

虽然看起来可能不是这样，但实际上是这样的。面板3被推到右侧，面板4被推到新行

panel1  |  panel 2
        |
        |  panel 3
        |
panel4  |

您的容器和col-sm-6之间缺少行div。这将防止立柱被推来推去

编辑：或者像这样的

---

虽然看起来可能不是这样，但实际上是这样的。面板3被推到右侧，面板4被推到新行

panel1  |  panel 2
        |
        |  panel 3
        |
panel4  |

您的容器和col-sm-6之间缺少行div。这将防止立柱被推来推去

编辑：或者像这样的

---

代码中似乎有很多重复的元素ID，这从来都不是good@wavemode是的，很乱。不过，大多数身份证实际上什么也没做。它们的存在只是为了让我能够识别它们。在你的代码中似乎有很多重复的元素ID，这是永远不会发生的good@wavemode是的，很乱。不过，大多数身份证实际上什么也没做。它们的存在只是为了让我能够识别它们。这修复了空白，这就是问题所在，但如果其中一个面板中有大量数据，则创建行会让它看起来很糟糕。你知道有什么办法可以绕过这个问题吗？@Envious看到我上面的编辑，我想这就是你要找的。。。这只会将其下方的面板向下推，而不是整行。这会修复空白，这就是问题所在，但如果其中一个面板中有大量数据，则创建行会使其看起来很糟糕。你知道有什么办法可以绕过这个问题吗？@Envious看到我上面的编辑，我想这就是你要找的。。。这只会将其下方的面板向下推，而不是整排。

<div class="container">
  <div class="row"> 
    <div class="col-sm-6">
      <div class="panel panel-primary">
          1
      </div>
      <div class="panel panel-primary">
          2
      </div>
    </div>
    <div class="col-sm-6">
      <div class="panel panel-primary">
          3
      </div>
      <div class="panel panel-primary">
          4
      </div>
    </div>
  </div>
</div>