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

简单 - 只需在崩溃中添加另一个具有样式

的div

Answer 2

你必须将你的内容包装在.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 3

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

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

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

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

Bootstrap崩溃和填充问题

3 个答案: