Twitter Bootstrap折叠插件方向水平,而不是垂直

有没有办法从水平而不是垂直折叠Bootstrap Collapse插件? 看看代码这个能力似乎并不是内置的,但我希望我只是错过了一些东西…

任何帮助将不胜感激。 谢谢!

我想出了如何做到这一点很容易,而无需修改或添加任何JavaScript。

首先在所有的Twitter Bootstrap CSS之后定义下面的CSS:

.collapse { height: auto; width: auto; } .collapse.height { position: relative; height: 0; overflow: hidden; -webkit-transition: height 0.35s ease; -moz-transition: height 0.35s ease; -o-transition: height 0.35s ease; transition: height 0.35s ease; } .collapse.width { position: relative; width: 0; overflow: hidden; -webkit-transition: width 0.35s ease; -moz-transition: width 0.35s ease; -o-transition: width 0.35s ease; transition: width 0.35s ease; } .collapse.in.width { width: auto; } .collapse.in.height { height: auto; } 

接下来,在目标元素(您定义.collapse类的位置)上,您需要添加类.width.height具体取决于您想要animation的属性。

最后,你必须包装目标元素的内容,并明确定义它的宽度,如果animation的宽度。 如果animation的高度,这不是必需的。

你可以在这里find一个工作的例子 – > http://jsfiddle.net/ud3323/ZBAHS/

使用bootstrap 3.0.0,只需要将宽度类添加到目标元素,然后将下面的CSS添加到animation中。

 .collapse.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; } 

在我的bootstrap 3(使用LESS)版本中,我只需将其包含在我的全局较less文件中:

 .collapsing.width { width: 0; height: auto; .transition(width 0.35s ease); } 

额外的类必须是自从collapse.js寻找这个类的过渡的width 。 我尝试了其他人的build议,但是他们不适合我。

它似乎不是该特定插件的选项。 它看起来像你可能需要修改它或挂钩到某种程度上,以使其以这种方式工作…

看了一下JS文件,我发现了一些东西。 首先,它看起来像可能使用bootstrap-transition.js ,似乎是使用CSS3转换。 所以有可能写一个新的转换。 我不是100%确定如果它是如何工作的。

选项一

我的build议是要么在bootstrap-collapse.js插件文件中查找一段时间,看看是否可以弄清楚它是如何工作的。

特别是我会看这部分… bootstrap-carousel.js

 this.$element[dimension](0) this.transition('addClass', $.Event('show'), 'shown') $.support.transition && this.$element[dimension](this.$element[0][scroll]) 

它看起来像.transition是从bootstrap-transition.js的callback

选项二

我的第二个build议是只写一些你自己的东西。

我的答案

最后,我的答案是,从看bootstrap文档看来,它似乎不是一个选项。

一些额外的信息:

这个网站似乎正在做类似的CSS3转换的东西。 http://ricostacruz.com/jquery.transit/

2017年更新

没有现有的答案为我工作。 要使折叠animation在最新版本中处于水平状态,您需要将过渡设置为宽度,并使用可见性

Bootstrap 3.3.7

 .collapse { visibility: hidden; } .collapse.in { visibility: visible; } .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; } 

3.x演示


Bootstrap 4.x

Bootstrap 4横向折叠转换基本相同,预计可见类现在是.show而不是.in 。 它也可以帮助指定显示:块,因为现在很多元素显示:flex。

 .collapse.show { visibility: visible; } 

4.x演示
4.x边栏演示

我认为translateX(-100%)和translateX(0)可能是去的方式,而不是animation宽度,因为正确使用硬件加速时支持

这里有很好的答案,但我必须做一些更清洁的双向过渡:

 .collapse.width, .collapsing { height: 25px; /* depending on your element height */ overflow: hidden; -webkit-transition: width 0.25s ease; -moz-transition: width 0.25s ease; -o-transition: width 0.25s ease; transition: width 0.25s ease; } 

设置一个固定的高度也有助于防止页面“跳”元素崩溃和扩大。