Twitter bootstrap 引导崩溃和填充问题

我使用的是带过渡的折叠。下面的代码可以工作，但因为我的样式表中有10px的填充，我看到div崩溃了，但在它应该停止10px之前就停止了，然后消失了。当div扩展到10px时，情况正好相反。在恢复到正确的大小之前，div会扩展到10px

HTML

---

简单-只需在具有样式的折叠div中添加另一个div

如果不想更改HTML结构，请添加以下样式：

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

当动画完成时，引导将“显示”设置为“无”，这将删除整个div，包括填充。将“可见性”设置为“隐藏”不会删除div，但其高度为0，因此只剩下填充

---

请确保这些样式是在引导样式表之后定义的。

您必须将内容包装在中。如果您希望填充，可以设置包装的CSS

HTML

---

这对我来说真的不管用，唉。仍然可以跳转。如果使用

.collapse

类引用样式表中的内部div，则该类不起作用，因为

collapse

类将在动画期间更改为

collapsing

。我包装了按钮而不是内容，它对我有效。非常感谢。

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

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

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

.wrapper{
  padding: 10px;
}