引导折叠和填充问题答案

【问题标题】：Bootstrap collapse and padding issue引导折叠和填充问题
【发布时间】：2013-09-28 05:43:56
【问题描述】：

我正在使用带有过渡的折叠。下面的代码有效，但因为我的样式表中有 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;
}

【问题讨论】：

标签： twitter-bootstrap css-transitions

【解决方案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;
}

【讨论】：

我已经包装了按钮而不是内容，它对我有用。谢谢

【解决方案2】：

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

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

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

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

【讨论】：

【解决方案3】：

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

【讨论】：

实际上并没有为我工作，唉。仍然得到跳跃。
如果您使用.collapse 类来引用样式表中的内部 div，则它不起作用，因为在动画期间collapse 类将更改为collapsing。