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

这是一个半解决方案＆＃39;因为如果没有很多额外的CSS来覆盖默认的填充而不破坏布局，它将无法在整个应用程序中运行。

理想情况下，我希望将填充保留在.panel-body上，并使折叠动画播放顺畅，不会在动画的开头和结尾处出现震动的高度变化。

我在笔中注释了解决方案CSS，以便您可以看到问题。

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

Bootstrap适用于某些东西，但我使用它越多，我的应用程序越大，我就越讨厌它。

Answer 1

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

我认为它不起作用，因为你错过了包裹你的小组的div.panel-group。

使用Accordion语法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>

面板上的Bootstrap折叠，填充导致＆＃34;跳转＆＃34;

1 个答案: