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，具体取决于您要设置动画的属性。

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

你可以在这里找到一个有用的例子 - ＆gt; 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

更新了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过渡。所以有可能写一个新的过渡。我不是百分之百确定，如果这是它的工作方式。

选项一

我的建议是在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;
}

设置固定高度也有助于防止页面跳跃＆＃34;随着元素的崩溃和扩展。

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

7 个答案: