twitter-bootstrap - 引导折叠和填充问题

Question

我正在使用带有过渡的折叠。下面的代码有效，但因为我的样式表中有 10px 的填充，我看到 div 崩溃但在它应该消失之前停止 10px 然后消失。展开时反过来也是如此，因为 div 在恢复到正确大小之前会比它应该扩大 10 像素。

HTML

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

CSS

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

Answer 1

您必须将内容包装在 .collapse 中，如果您想要填充，您可以设置包装器的 CSS。

HTML

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

CSS

.wrapper{
  padding: 10px;
}

Answer 2

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

Answer 3

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

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

当动画结束时，Bootstrap 将 display 设置为 none，这会删除整个 div，包括填充。将可见性设置为隐藏不会删除 div，但它的高度为 0，所以剩下的就是填充。

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