38

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

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

4

7 回答 7

23

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

于 2012-09-25T23:14:52.463 回答
22

使用 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;
}
于 2013-09-03T22:52:47.727 回答
9

2019 年更新

引导程序 4.x

Bootstrap 4 的水平折叠过渡基本相同，预计可见类现在.show是.in. 指定 display:block 也可能会有所帮助，因为现在许多元素都是 display: flex。

.collapse.show {
  visibility: visible;
}

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

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

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

于 2017-05-19T12:26:17.260 回答
6

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

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

额外的类必须是width因为 collapse.js 会寻找这个类来进行转换。我尝试了其他人的建议，但它们对我不起作用。

于 2014-03-18T05:11:51.170 回答
4

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

看了一会儿 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/

于 2012-09-19T16:39:30.110 回答
1

我认为 translateX(-100%) 和 translateX(0) 可能是要走的路，而不是动画宽度，因为在支持时正确使用硬件加速

于 2014-04-16T12:19:26.013 回答
0

这里的答案很好，但我必须进行一些修改以获得更清晰的双向转换：

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

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

于 2016-05-23T16:42:12.733 回答