Twitter Bootstrap 折叠插件方向——水平而非垂直

Question

有没有一种方法可以使Bootstrap Collapse插件从水平方向而不是垂直方向折叠？查看代码，似乎没有内置此功能，但我希望我只是忽略了什么...

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

- Roy Daniels

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/

- Roy Daniels

---

请参考 https://dev59.com/D3jZa4cB1Zd3GeqPjeIL#26898065 和 http://jsfiddle.net/zu5ftdjx/，这是一个可行的示例。 - Bass Jobsen

更新的3.3.7工作Bootply => https://www.bootply.com/vwS8HxEeVB - Carol Skelly

这在最新的3.x或4.x版本中不起作用 - 请参见我的更新：https://dev59.com/6Gcs5IYBdhLWcg3w5H5a#44070096 - Carol Skelly

Answer 2

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

- flipside

---

谢谢 - 我最初使用了Roy Daniels上面的版本，并且正在寻找是否有更简单的方法在我们升级到3.0之后实现它。 - Emma Burrows

这似乎对我不起作用。我正在使用 flat-ui 在 bootstrap 之上。 - Bhushan Lodha

有没有 JSFiddle？ - richard

Answer 3

更新于2019年

Bootstrap 4.x

Bootstrap 4的水平折叠过渡基本相同，唯一不同的是可见类现在为.show而不是.in。由于许多元素现在是display: flex，因此指定display:block可能会有所帮助。

.collapse.show {
  visibility: visible;
}

4.x水平折叠演示
4.x侧边栏演示

另请参见：
Bootstrap水平菜单折叠到侧边菜单
如何从左侧而不是从顶部滑动导航栏？

---

Bootstrap 3.3.7 （原始答案）

对我来说，现有的任何答案都没有用。要使最新版本中的折叠动画为水平方向，您需要将过渡设置为宽度，并且还要使用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;
}

3.x demo

- Zim

---

如何使其变成水平手风琴效果，与垂直手风琴类似，并确保每次只打开一个？ - Shashank Bhatt

我根据这个例子做了一些东西，但是当元素水平折叠时，我看到了单词换行。在这些例子中我没有看到任何防止它的东西，我错过了什么？ - Jeremy

@MikeFlynn 演示链接对我来说似乎没问题，但无论如何相关的 CSS 都在答案中。 - Carol Skelly

Answer 4

在我的bootstrap 3版本中（使用LESS），我只需要在全局less文件中包含以下内容：

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

额外的类必须是width，因为collapse.js寻找这个类进行过渡动画。我尝试了其他人的建议，但对我没有用。

- J_A_X

---

这个方法对我很有用，但由于我的less文件未与bootstrap一起编译，所以我必须在使用它之前定义.transition mixin：.transition (@transition) { -webkit-transition: @transition; -moz-transition: @transition; -ms-transition: @transition; -o-transition: @transition; } - yellowcap

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的回调函数。

第二个选项

我的第二个建议是自己编写一些内容。

我的答案

最后我的答案是，从查看Bootstrap文档中似乎没有这个选项。

一些附加信息：

这个网站似乎正在使用CSS3过渡效果进行类似的操作。 http://ricostacruz.com/jquery.transit/

- khollenbeck

---

这正是我所想的。利用Bootstrap中已有的内容会很不错，因此我打算尝试创建自己的过渡效果，利用bootstrap-transition.js。感谢您的建议，我非常感激！ - Roy Daniels

没问题。祝你编程好运！ - khollenbeck

Answer 6

我认为使用 translateX(-100%) 和 translateX(0) 可能是更好的方法，而不是通过动画宽度来使用正确支持硬件加速的方式。

- Adam Spence

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

设置固定高度也有助于防止页面“跳动”，因为元素会收缩和展开。

- Ixalmida