Problema di compressione e imbottitura bootstrap

Question

Sto utilizzando il collasso con le transizioni. Il codice qui sotto funziona, ma poiché ho il 10px padding nel mio foglio di stile, vedo il div crollo ma smetto di 10px prima di farlo e poi svanisco. Il contrario è vero durante l'espansione poiché il div si espande a 10px più grande di quanto dovrebbe prima di tornare alle dimensioni corrette.

HTML

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

CSS

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

Answer 1

facile - basta aggiungere un altro div all'interno del crollo quella che ha lo stile

Answer 2

Se non si desidera modificare la struttura HTML, aggiungere questi stili:

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

I set di bootstrap vengono visualizzati su none al termine dell'animazione, che rimuove l'intero div, incluso il padding. Impostare la visibilità su nascosto non rimuove il div, ma l'altezza è 0, quindi tutto è rimasto il padding.

Assicurarsi che questi stili siano definiti dopo il foglio di stile di bootstrap.

Answer 3

È necessario avvolgere il contenuto in .collapse e se si desidera avere il padding, è possibile impostare i CSS del proprio wrapper.

HTML

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

CSS

.wrapper{ 
    padding: 10px; 
}