引导折叠和填充问题

Question

我正在使用带有过渡的折叠。下面的代码有效，但由于我的样式表中有 10px 填充，我看到div 折叠，但在它应该之前停止 10px，然后消失。在扩展时情况正好相反，因为div 在恢复到正确的大小之前扩展到比应有的大 10px。

.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 在动画完成时将显示设置为无，这将删除整个div，包括填充。将可见性设置为隐藏不会删除div，但它的高度为 0，因此只剩下填充。

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