ブートストラップの折りたたみとパディングの問題

Question

私はトランジションで折り畳みを使用しています。以下のコードは動作しますが、私は自分のスタイルシートに10pxのパディングを持っているので、div collapseが表示されますが、10pxを停止して消える前に停止しています。 divは正しいサイズにスナップバックする前に10px以上に拡大するので、逆は展開時に真です。

HTML

<div ng-controller="MainCtrl" class="box-content collapse" id="mybox"> 
          Lorem ipsum ... 
</div> 

CSS

.box-content{ 
    background: red; 
    padding: 10px; 
} 

Answer 1

簡単に - ちょうどあなたがHTMLの構造を変更しない場合はスタイリング

Answer 2

を持っ崩壊1内の別のdivを追加し、次のスタイルを追加してください：

/* Override bootstrap collapse to keep margins */ 
.collapse.in { 
    display: inherit; 
    visibility: visible; 
} 
.collapse { 
    display: inherit; 
    visibility: hidden; 
} 

アニメーションが終了すると、ブートストラップセットはnoneに表示され、paddingを含むdiv全体が削除されます。可視性を非表示に設定してもdivは削除されませんが、高さは0なので、すべてが残っています。

ブートストラップスタイルシートの後にこれらのスタイルがに設定されていることを確認してください。

Answer 3

あなたのコンテンツを.collapseでラップする必要があります。パディングをしたい場合は、ラッパーのCSSを設定できます。

HTML

<div ng-controller="MainCtrl" class="box-content collapse" id="mybox"> 
    <div class='wrapper'>     
    Lorem ipsum ... 
    </div> 
</div> 

CSS

.wrapper{ 
    padding: 10px; 
}