面板上的引导折叠，填充导致“跳转”

Question

我将折叠行为应用于面板元素，它确实有效，但由于应用于.panel-body 的填充，动画在填充处停止，然后立即捕捉到高度。您可以在 codepen 中最基本的示例中看到这种情况：http://codepen.io/FiveSixTwo/pen/NRQLPo

<div class="container">
  <div class="panel panel-default">
    <div class="panel-heading" role="button" data-target="#test" data-toggle="collapse">Test Heading<span class="btn-collapse-header glyphicons glyphicons-chevron-up"></span></div>
    <div id="test" class="panel-body collapse in" aria-expanded="true">
      <p>Laoreet ac, aliquam sit amet justo nunc tempor, metus vel placerat suscipit, orci nisl iaculis eros, a tincidunt nisi odio eget lorem nulla condimentum tempor mattis ut vitae feugiat augue cras ut metus a risus iaculis scelerisque eu ac ante fusce
        non varius purus aenean nec magna felis fusce vestibulum.</p>
      <p>Laoreet ac, aliquam sit amet justo nunc tempor, metus vel placerat suscipit, orci nisl iaculis eros, a tincidunt nisi odio eget lorem nulla condimentum tempor mattis ut vitae feugiat augue cras ut metus a risus iaculis scelerisque eu ac ante fusce
        non varius purus aenean nec magna felis fusce vestibulum.</p>
      <p>Laoreet ac, aliquam sit amet justo nunc tempor, metus vel placerat suscipit, orci nisl iaculis eros, a tincidunt nisi odio eget lorem nulla condimentum tempor mattis ut vitae feugiat augue cras ut metus a risus iaculis scelerisque eu ac ante fusce
        non varius purus aenean nec magna felis fusce vestibulum.</p>
    </div>
  </div>
</div>

半解：

.panel-body {
  padding: 0;
  p {
    padding: 15px 15px 0;
    &:last-of-type { padding-bottom: 15px; }
  }
}

这是一个“半解决方案”，因为如果没有大量额外的 CSS 来覆盖默认填充而不破坏布局，它就无法在我的整个应用程序中运行。

理想情况下，我希望保持.panel-body 上的填充，并让折叠动画顺利播放，而不会在动画的开头和结尾出现不和谐的高度变化。

我用笔将解决方案 CSS 注释掉，以便您查看问题。

我想最简单的做法是将所有内容放在另一个带有填充的 div 中，但这并不比半解决方案好多少。我更喜欢全局 CSS 甚至 JS 解决方案，但到目前为止我还没有想出任何东西。

Bootstrap 对于某些事情来说很好，但我使用它的次数越多，我的应用程序越大，我就越讨厌它。

Answer 1

http://codepen.io/anon/pen/QKeZea

我认为它不起作用，因为您缺少包裹面板的div.panel-group。

使用手风琴语法http://getbootstrap.com/javascript/#collapse-example-accordion

<div class="container">
  <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingOne">
      <h4 class="panel-title">
        <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          Collapsible Group Item #1
        </a>
      </h4>
    </div>
    <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
      <div class="panel-body">
              <p>Laoreet ac, aliquam sit amet justo nunc tempor, metus vel placerat suscipit, orci nisl iaculis eros, a tincidunt nisi odio eget lorem nulla condimentum tempor mattis ut vitae feugiat augue cras ut metus a risus iaculis scelerisque eu ac ante fusce
        non varius purus aenean nec magna felis fusce vestibulum.</p>
      <p>Laoreet ac, aliquam sit amet justo nunc tempor, metus vel placerat suscipit, orci nisl iaculis eros, a tincidunt nisi odio eget lorem nulla condimentum tempor mattis ut vitae feugiat augue cras ut metus a risus iaculis scelerisque eu ac ante fusce
        non varius purus aenean nec magna felis fusce vestibulum.</p>
      <p>Laoreet ac, aliquam sit amet justo nunc tempor, metus vel placerat suscipit, orci nisl iaculis eros, a tincidunt nisi odio eget lorem nulla condimentum tempor mattis ut vitae feugiat augue cras ut metus a risus iaculis scelerisque eu ac ante fusce
        non varius purus aenean nec magna felis fusce vestibulum.</p>
      </div>
    </div>
  </div>  
</div>
</div>