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; }
设置一个固定的高度也有助于防止页面“跳”元素崩溃和扩大。
