Bootstrap:如何在不跳跃的情况下折叠包装div？

Question

我想折叠并在点击链接时显示两列.

我已将两列包装在a中div,其中有一个id由上面列中的链接引用.第一列占据页面的整个宽度,第二列和第三列应该拆分页面或堆栈.所有三列都包含在a中div.row,行在页面中重复.

看起来崩溃动画适用于具有边框的行.然而,开放转型"跳跃"回升.如果我删除行上的边框并单击链接,则会突然出现两列之前的延迟.

我不希望这些事情发生.我希望在单击链接时显示两列的平滑过渡.我怎么能做到这一点？

<div class='container'>
  <div class='row' style='border-bottom: 1px solid #ddd;'>
    <div class='col-xs-12'>
      <a data-toggle='collapse' href='#details1'>Open or close details</a>
    </div>
    <div class='collapse' id='details1'>
      <div class='col-sm-6'>
        <table class='table table-bordered table-condensed'>
          <tr>
            <td>Hello</td>
            <td>World</td>
          </tr>
        </table>
      </div>
      <div class='col-sm-6'>
        <b>Hello world</b>
      </div>
    </div>
  </div>

  <div class='row'>
    <div class='col-xs-12'>
      <a data-toggle='collapse' href='#details2'>Open or close details (row with no border)</a>
    </div>
    <div class='collapse' id='details2'>
      <div class='col-sm-6'>
        <table class='table table-bordered table-condensed'>
          <tr>
            <td>Hello</td>
            <td>World</td>
          </tr>
        </table>
      </div>
      <div class='col-sm-6'>
        <b>Hello world</b>
      </div>
    </div>
  </div>
</div>

JSFiddle.

Answer 1

得到它了!需要设置包装器div,使其高度等于其子节点的最大高度(因此Bootstrap知道要扩展多少).从Make外部div自动与其浮动内容相同的高度,这在某种程度上起作用(!？)

.details {
    overflow: hidden;
    clear: both;
}

div.details包含两列的包装器div 在哪里.见JSFiddle.