我按照这里的说明(
https://stackoverflow.com/a/18602739/2966090)在Bootstrap 3.0.2中水平折叠元素.
这种方法在Firefox和Firefox中运行良好. Internet Explorer,但在Chrome中显示出奇怪的反弹. Chrome也没有任何隐藏转换.
我用这里的行为创建了一个测试：http://jsfiddle.net/eT8KH/1/
这是相关的代码(也在jsfiddle上)：
CSS
#demo.width {
height: auto;
-webkit-transition: width 0.35s ease;
-moz-transition: width 0.35s ease;
-o-transition: width 0.35s ease;
transition: width 0.35s ease;
}
HTML
<button type="button" class="btn btn-primary" data-toggle="collapse" data-target="#demo">
Horizontal Collapsible
</button>
<div id="container" style="width:200px;">
<div id="demo" class="collapse in width" style="background-color:yellow;">
<div style="padding: 20px; overflow:hidden; width:200px;">
Here is my content
</div>
</div>
</div>
解决方法
我能够重现您的问题,但我找到的解决方案与Chrome无关.
我发现一些CSS代码丢失了,插件代码中有一些“bug”.我已经写了一个公关来解决这个问题,请参阅：https://github.com/twbs/bootstrap/pull/15104
演示：http://jsfiddle.net/zu5ftdjx/
要在当前代码中修复此问题：
在collapse.js中：
第104行应该成为这个.$element [dimension](this.$element [dimension]())[0] [$.camelCase([‘inner’,dimension] .join(”))]
少(在组件 – 动画.无)
.collapsing {
position: relative;
height: 0;
overflow: hidden;
.transition-property(~"height,visibility");
&.width {
.transition-property(~"width,visibility");
width:0;
height:auto;
}
.transition-duration(.35s);
.transition-timing-function(ease);
}
.collapsing {
position: relative;
height: 0;
overflow: hidden;
-webkit-transition-property: height,visibility;
transition-property: height,visibility;
-webkit-transition-duration: 0.35s;
transition-duration: 0.35s;
-webkit-transition-timing-function: ease;
transition-timing-function: ease;
}
.collapsing.width {
-webkit-transition-property: width,visibility;
transition-property: width,visibility;
width: 0;
height: auto;
}
