jQuery Twitter Bootstrap 折叠插件方向—水平而不是垂直
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12498476/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Twitter Bootstrap Collapse plugin Direction—Horizontal instead of Vertical
提问by Roy Daniels
Is there a way to collapse the the Bootstrap Collapse plugin from horizontally instead of vertically? Looking at the code this ability doesn't seem to be built in, but I'm hoping I'm just missing something...
有没有办法从水平而不是垂直折叠 Bootstrap Collapse 插件？查看代码似乎没有内置此功能，但我希望我只是遗漏了一些东西......
Any help will be greatly appreciated. Thanks!
任何帮助将不胜感激。谢谢！
采纳答案by Roy Daniels
I figured out how to do this very easily without modifying or adding any javascript.
我想出了如何在不修改或添加任何 javascript 的情况下很容易地做到这一点。
First you define the following CSS after all Twitter Bootstrap CSS:
首先，在所有 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;
}
Next, on the target element (where you define the .collapseclass) you need to add the class .widthor .heightdepending on what property you want to animate.
接下来，在目标元素（您定义.collapse类的地方）上，您需要添加类.width或.height取决于您想要设置动画的属性。
Finally, you mustwrap the contents of the target element and explicitly define its width if animating the width. This is not required if animating the height.
最后，如果动画宽度，您必须包装目标元素的内容并显式定义其宽度。如果动画高度，这不是必需的。
You can find a working example here -> http://jsfiddle.net/ud3323/ZBAHS/
你可以在这里找到一个工作示例 -> http://jsfiddle.net/ud3323/ZBAHS/
回答by flipside
With bootstrap 3.0.0, you just need to add the width class to the target element and then the following css if you want it to animate.
使用 bootstrap 3.0.0，您只需要将宽度类添加到目标元素，然后添加以下 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;
}
回答by Zim
Updated 2019
2019 年更新
Bootstrap 4.x
引导程序 4.x
Bootstrap 4 horizontal collapse transtion is basically the same, expected the visible class is now .showinstead of .in. It also may help to specify display:block since many elements are now display: flex.
Bootstrap 4 水平折叠转换基本相同，预计可见类现在.show不是.in. 它也可能有助于指定 display:block 因为许多元素现在显示：flex。
.collapse.show {
visibility: visible;
}
Also see:
Bootstrap horizontal menu collapse to sidemenu
Bootstrap - How to slide nav bar from left instead from top
另请参阅：
Bootstrap 水平菜单折叠到 sidemenu
Bootstrap - 如何从左侧而不是从顶部滑动导航栏
Bootstrap 3.3.7(original answer)
Bootstrap 3.3.7（原始答案）
None of the existing answers worked for me. To make the collapse animation horizontal in the latest versions you need to set both transition to width, and also use visibility.
现有的答案都不适合我。要在最新版本中使折叠动画水平，您需要将过渡设置为宽度，还需要使用可见性。
.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;
}
回答by J_A_X
In my version of bootstrap 3 (using LESS), I simply had to include this in my global less file:
在我的 bootstrap 3 版本（使用 LESS）中，我只需要将它包含在我的全局 less 文件中：
.collapsing.width {
width: 0;
height: auto;
.transition(width 0.35s ease);
}
The extra class hasto be widthsince the collapse.js looks for this class for the transition. I tried everyone else's suggestions, but they didn't work for me.
额外的类必须是width因为 collapse.js 寻找这个类进行转换。我尝试了其他人的建议，但它们对我不起作用。
回答by Kris Hollenbeck
It doesn't appear to be an option for that particular plugin. It looks like you may need to modify it or hook into it somehow to get it to work that way...
它似乎不是该特定插件的选项。看起来你可能需要修改它或以某种方式挂钩它才能让它以这种方式工作......
After looking at the JS file for a bit I noticed a couple things. First thing is that it looks like it might be using bootstrap-transition.js,which appears to be using CSS3 transitions. So it might be possible to write a new transition. I am not 100% certain if that is how it is working though.
在查看了 JS 文件之后，我注意到了一些事情。第一件事是它看起来可能正在使用bootstrap-transition.js，它似乎在使用 CSS3 转换。所以有可能编写一个新的过渡。我不是 100% 确定它是否是这样工作的。
Option One
选项一
My suggestion would be to either poke around in the bootstrap-collapse.js plugin file for a while and see if you can figure out how it is working.
我的建议是在 bootstrap-collapse.js 插件文件中浏览一会儿，看看你是否能弄清楚它是如何工作的。
In particular I would look at this part... bootstrap-carousel.js
特别是我会看这部分... bootstrap-carousel.js
this.$element[dimension](0)
this.transition('addClass', $.Event('show'), 'shown')
$.support.transition && this.$element[dimension](this.$element[0][scroll])
It looks like .transitionis a callback from bootstrap-transition.js
看起来像是.transition来自bootstrap-transition.js的回调
Option Two
选项二
My second suggestion would be to just write something of your own.
我的第二个建议是只写一些你自己的东西。
My Answer
我的答案
And finally my answer is that from looking at the bootstrap documentation it doesn't appear to be an option.
最后，我的回答是，从 bootstrap 文档来看，它似乎不是一个选项。
Some additional info:
一些额外的信息：
This website seems to be doing similar stuff with CSS3 transitions. http://ricostacruz.com/jquery.transit/
这个网站似乎在用 CSS3 过渡做类似的事情。 http://ricostacruz.com/jquery.transit/
回答by Adam Spence
i think translateX(-100%) and translateX(0) might be the way to go rather than animating width as uses hardware acceleration correctly when supported
我认为 translateX(-100%) 和 translateX(0) 可能是要走的路，而不是动画宽度，因为在支持时正确使用硬件加速
回答by Ixalmida
Good answers here, but I had to make some modifications for a cleaner, two-way transition:
这里的答案很好，但我必须进行一些修改以获得更清晰的双向转换：
.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;
}
Setting a fixed height also helped prevent page "jump" as the element collapsed and expanded.
设置固定高度还有助于防止页面在元素折叠和展开时“跳转”。
