我按照此处的说明 ( https://stackoverflow.com/a/18602739/2966090 )在 Bootstrap 3.0.2 中水平折叠元素。
此方法在 Firefox 和 Internet Explorer 中运行良好,但在 Chrome中显示时会出现奇怪的反弹。Chrome 在hide也没有任何过渡。
我在这里创建了一个行为测试: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 中的一个错误?