Sự sụp đổ và vấn đề đệm khởi động

Question

Tôi đang sử dụng sự sụp đổ với các hiệu ứng chuyển tiếp. Đoạn mã dưới đây hoạt động nhưng bởi vì tôi có 10px padding trong stylesheet của tôi, tôi thấy sự sụp đổ div nhưng dừng 10px trước khi nó nên và sau đó biến mất. Điều ngược lại là đúng khi mở rộng khi div mở rộng lớn hơn 10px so với trước khi chụp lại kích thước chính xác.

HTML

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

CSS

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

Answer 1

dễ dàng - chỉ cần thêm div khác bên trong sự sụp đổ một trong đó có phong cách

Answer 2

Nếu bạn không muốn thay đổi cấu trúc HTML, thêm các kiểu sau:

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

Các bộ Bootstrap hiển thị thành không khi hoạt ảnh kết thúc, loại bỏ toàn bộ div, bao gồm cả phần đệm. Thiết lập khả năng hiển thị ẩn sẽ không loại bỏ div, nhưng chiều cao của nó là 0, vì vậy tất cả còn lại là phần đệm.

Đảm bảo các kiểu này được xác định sau biểu định kiểu bootstrap.

Answer 3

Bạn phải bọc nội dung của mình vào .collapse và nếu bạn muốn có đệm, bạn có thể đặt CSS của trình bao bọc của bạn.

HTML

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

CSS

.wrapper{ 
    padding: 10px; 
}