有没有办法从水平方向而不是垂直方向折叠Bootstrap collapse插件？从代码来看，这种能力似乎并没有内置，但我希望我只是缺少了一些东西。。。
任何帮助都将不胜感激。谢谢
我发现了如何在不修改或添加任何javascript的情况下轻松完成这项工作。
首先，在所有Twitter引导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。
最后，必须包装目标元素的内容，并在设置宽度动画时显式定义其宽度。如果为高度设置动画，则不需要执行此操作。
您可以在此处找到一个工作示例->http://jsfiddle.net/ud3323/ZBAHS/
使用bootstrap 3.0.0，您只需要将width类添加到目标元素中，然后添加以下css(如果您希望它设置动画)。
.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;
}
2019年更新
引导4.x
Bootstrap 4水平折叠转换基本相同，预期可见类现在是.show而不是.in。指定display:block也可能有帮助，因为现在许多图元都是display:flex。
.collapse.show {
visibility: visible;
}
4.x水平折叠演示
4.x侧边栏演示
另请参阅：
引导水平菜单折叠到侧菜单
如何从左侧而不是从顶部滑动导航栏？
引导程序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 3版本中(使用LESS)，我只需要将其包含在我的全局LESS文件中：
.collapsing.width {
width: 0;
height: auto;
.transition(width 0.35s ease);
}
由于collapse.js为转换查找此类，因此额外类的为width。我尝试了其他人的建议，但对我不起作用
这似乎不是该特定插件的选项。看起来你可能需要修改它，或者以某种方式挂入它，以使它以这种方式工作。。。
在看了JS文件一段时间后，我注意到了一些事情。首先，它看起来可能正在使用bootstrap transition.js，它似乎正在使用CSS3转换。因此，也许可以编写一个新的转换。不过，我不能百分之百确定它是否就是这样运作的。
选项一
我的建议是，在bootstrap-collapse.js插件文件中浏览一段时间，看看你是否能弄清楚它是如何工作的。
我会特别关注这一部分引导程序转盘.js
this.$element[dimension](0)
this.transition('addClass', $.Event('show'), 'shown')
$.support.transition && this.$element[dimension](this.$element[0][scroll])
看起来.transition是bootstrap transition.js的回调
选项二
我的第二个建议是写一些你自己的东西。
我的答案
最后，我的答案是，从引导程序文档来看，这似乎不是一个选项。
一些附加信息：
这个网站似乎在CSS3转换中做类似的事情。http://ricostacruz.com/jquery.transit/
我认为translateX(-100%)和translateX
这里的答案很好，但我必须进行一些修改才能实现更干净的双向转换：
.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;
}
设置固定的高度还有助于防止元素折叠和展开时页面"跳转"。