jquery - Bootstrap 面板折叠创建间隙

Question

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

这是我展开面板 1 时发生的情况。1 和 3 之间的间隙无缘无故地有很多空白。我似乎无法找到解决它的方法。

panel1  |  panel 2
        |
        |  panel 4
        |
panel3  |

Bootply example

Answer 1

虽然看起来不像，但这就是实际发生的事情。面板 3 被推到右边，面板 4 被推到新的一行。

panel1  |  panel 2
        |
        |  panel 3
        |
panel4  |

您的 container 和 col-sm-6 之间缺少 row div。这将防止列被推来推去。

DEMO

<div class="container">
  <div class="row"> <!--ADD ROW-->
    <div class="col-sm-6">
      <div class="panel panel-primary">
          1
      </div>
    </div>
    <div class="col-sm-6">
      <div class="panel panel-primary">
          2
      </div>
    </div>
  </div><!--END ROW-->

  <div class="row"><!--ADD ROW-->
    <div class="col-sm-6">
      <div class="panel panel-primary">
          3
      </div>
    </div>
    <div class="col-sm-6">
      <div class="panel panel-primary">
          4
      </div>
    </div>
  </div><!--END ROW-->
</div>

编辑:或类似的东西......

DEMO

<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>