Twitter的引导崩溃插件的方向，而不是水平垂直(Twitter Bootstrap Collap

有没有办法从横向而不是纵向折叠的引导崩溃插件？看代码这种能力似乎并没有建成，但我希望我只是失去了一些东西...

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

Answer 1:

我想出如何在不修改或添加任何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/

Answer 2:

自举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;
}

Answer 3:

在我的引导版本3（使用更少），我根本就包括这在我的全球较少的文件：

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

额外的类必须是width ，因为collapse.js查找该类过渡。我想其他人的意见，但他们并没有为我工作。

Answer 4:

更新2019

引导4.x版

引导4水平崩溃跃迁基本相同，预计在可见类现在.show代替.in 。它也可能有助于指定显示：块，因为许多元素现在显示：弯曲。

.collapse.show {
  visibility: visible;
}

4.x版试玩
4.x的侧边栏演示

另请参阅：
引导横向菜单崩溃sidemenu
引导-如何导航栏从左而不是从顶部滑动

引导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演示

Answer 5:

这似乎并不为特定插件的选项。它看起来像您可能需要对其进行修改或钩到它以某种方式得到它的工作方式......

寻找了一下JS文件后，我注意到有两件事情。第一件事是，它看起来像它可能会使用自举transition.js，这显然是利用CSS3过渡。因此，有可能写一个新的转变。我不是100％肯定，如果这是它是如何工作的，但。

方案一

我的建议是要么闲逛呆一会引导-collapse.js插件文件，看看你能弄清楚它是如何工作的。

特别是我想看看这部分...... 自举carousel.js

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

它看起来像.transition是自举transition.js回调

方案二

我的第二个建议是只写你自己的东西。

我的答案

最后我的答案是，从着眼于引导文档它不会出现是一个选项。

一些额外的信息：

这个网站似乎是在做类似的东西与CSS3过渡。 http://ricostacruz.com/jquery.transit/

Answer 6:

我认为平移X（-100％）和平移X（0）可能会去，而不是动画宽度的方式正确地使用硬件加速的支持时，

Answer 7:

在这里很好的答案，但我不得不做出一些修改，更清洁，双向转变：

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

设置一个固定的高度也有助于防止网页“跳”作为元素折叠和展开。

文章来源: Twitter Bootstrap Collapse plugin Direction—Horizontal instead of Vertical