javascript - Bootstrap : How to collapse a wrapper div without jumping?

Question

我想在单击链接时折叠并显示两列。

我将这两列包装在一个 div 中，它有一个 id 由它上面的列中的链接引用。第一列占据页面的整个宽度，第二列和第三列应该拆分页面或堆栈。所有三列都包含在 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 outer div be automatically the same height as its floating content ，这在某种程度上有效(!？)

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

其中 div.details 是包含两列的包装器 div。查看JSFiddle .