Bootstrap：如何在不跳转的情况下折叠包装器 div？

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。

Answer 2

在您提供的 JSFiddle 中，两者的行为方式完全相同，它们打开然后内容出现。

唯一的区别是您看不到它在第二个中打开，因为它是白底白字，请尝试为其添加边框或背景。