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

额外的类必须是width自collapse.js为转换查找此类.我尝试了其他人的建议,但他们并没有为我工作.

Answer 4

2018年更新

Bootstrap 4.x

Bootstrap 4水平折叠转换基本相同,预计可见类现在.show代替.in.它也可能有助于指定display:block,因为现在显示许多元素:flex.

.collapse.show {
  visibility: visible;
}

4.x演示
4.x侧边栏演示

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