Problem zwijania i dopełniania bootstrapów

Question

Używam zwinięcia z przejściami. Poniższy kod działa, ale ponieważ mam dopełnienie 10px w moim arkuszu stylów, widzę zwijacz div, ale zatrzymuję 10px przed nim, a następnie znika. Odwrotność jest prawdą w przypadku rozwijania się, gdy div rozwija się do 10px większe niż powinno, przed przywróceniem do właściwego rozmiaru.

HTML

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

CSS

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

Answer 1

proste - wystarczy dodać inny div wewnątrz upadku jednego, który ma stylistykę

Answer 2

Jeśli nie chcesz, aby zmienić strukturę HTML dodaj te style:

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

Zestawy startowe wyświetlają się jako brak po zakończeniu animacji, co powoduje usunięcie całego elementu div, w tym dopełnienia. Ustawienie widoczności na ukryte nie powoduje usunięcia elementu div, ale jego wysokość wynosi 0, więc pozostało tylko dopełnienie.

Upewnij się, że style te są zdefiniowane jako po arkuszu stylów ładowania.

Answer 3

Musisz zawinąć zawartość w .collapse i jeśli chcesz mieć dopełnienie, możesz ustawić CSS swojego wrappera.

HTML

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

CSS

.wrapper{ 
    padding: 10px; 
}