Bootstrap-Kollaps und Padding-Problem

Question

Ich verwende den Kollaps mit Übergängen. Der folgende Code funktioniert, aber weil ich 10px Padding in meinem Stylesheet habe, sehe ich das div collapse aber stop 10px bevor es sollte und dann verschwinden. Das Umgekehrte ist wahr, wenn das div erweitert wird, um 10px größer als es sollte, bevor es auf die richtige Größe zurückschnappt.

HTML

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

CSS

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

Answer 1

einfach - fügen Sie einfach einen weiteren div innerhalb der Einsturz eines, das das Styling hat

Answer 2

Wenn Sie nicht wollen, die HTML-Struktur zu ändern, füge diese Stile hinzu:

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

Bootstrap legt die Anzeige nach Beendigung der Animation auf "none" fest, wodurch das gesamte div einschließlich der Auffüllung entfernt wird. Wenn Sie die Sichtbarkeit auf "Versteckt" setzen, wird das div nicht entfernt, aber die Höhe ist 0, so dass nur noch das Padding übrig ist.

Stellen Sie sicher, dass diese Stile definiert sind nach das Bootstrap-Stylesheet.

Answer 3

Sie müssen Ihren Inhalt in .collapse einschließen, und wenn Sie einen Padding haben möchten, können Sie CSS Ihres Wrappers setzen.

HTML

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

CSS

.wrapper{ 
    padding: 10px; 
}