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

Question

有没有办法从水平而不是垂直折叠Bootstrap Collapse插件？看看代码这个能力似乎没有内置，但我希望我只是遗漏了一些东西......

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

Answer 1

我想出了如何在不修改或添加任何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，具体取决于您要设置动画的属性。

最后，如果动画宽度，则必须包装目标元素的内容并显式定义其宽度。如果设置高度动画，则不需要这样做。

你可以在这里找到一个有效的例子 - > http://jsfiddle.net/ud3323/ZBAHS/

Answer 2

使用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;
}

Answer 3

在我的bootstrap 3版本中（使用LESS），我只需将其包含在我的全局less文件中：

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

由于collapse.js为转换寻找此类，因此额外的类必须是width。我尝试了其他人的建议，但他们并没有为我工作。

Answer 4

2019年更新

Bootstrap 4.x

Bootstrap 4水平坍塌转换基本相同，预计可见类现在是.show而不是.in。它也可能有助于指定display：block，因为现在显示许多元素：flex。

.collapse.show {
  visibility: visible;
}

4.x demo 4.x sidebar demo

另见： Bootstrap horizontal menu collapse to sidemenu Bootstrap - How to slide nav bar from left instead from top

---

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 demo

Answer 5

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

看了一下JS文件后，我注意到了一些事情。首先，看起来它可能正在使用bootstrap-transition.js，它似乎正在使用CSS3过渡。所以有可能写一个新的过渡。我不是100％肯定，如果这是它的工作方式。

方案一

我的建议是在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的回调

方案二

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

我的答案

最后我的回答是，通过查看引导文档，它似乎不是一个选项。

一些额外的信息：

这个网站似乎与CSS3过渡做类似的事情。 http://ricostacruz.com/jquery.transit/

Answer 6

我认为translateX（-100％）和translateX（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;
}

当元素折叠和展开时，设置固定高度也有助于防止页面“跳转”。