ブートストラップパネル上で折りたたみ、パディングにより「ジャンプ」が発生する

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ソリューションを好むだろうが、これまで私は何も思い付いていない。

ブートストラップはいくつかの点では問題ありませんが、使用するほど大きくなり、私のアプリが大きくなればなるほど、私はそれを嫌います。

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>