Twitter Bootstrap折叠插件方向-水平而不是垂直 [英] Twitter Bootstrap Collapse plugin Direction—Horizontal instead of Vertical

问题描述

是否有办法从水平方向而不是垂直方向折叠Bootstrap Collapse插件?查看代码，似乎没有内置此功能，但是我希望我只是缺少一些东西...

Is there a way to collapse the the Bootstrap Collapse plugin from horizontally instead of vertically? Looking at the code this ability doesn't seem to be built in, but I'm hoping I'm just missing something...

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

Any help will be greatly appreciated. Thanks!

推荐答案

我想出了如何轻松地做到这一点，而无需修改或添加任何javascript.

I figured out how to do this very easily without modifying or adding any javascript.

首先，在所有Twitter Bootstrap CSS之后定义以下CSS:

First you define the following CSS after all Twitter Bootstrap 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.

Next, on the target element (where you define the .collapse class) you need to add the class .width or .height depending on what property you want to animate.

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

Finally, you must wrap the contents of the target element and explicitly define its width if animating the width. This is not required if animating the height.

您可以在此处找到一个有效的示例-> http://jsfiddle.net/ud3323/ZBAHS/

You can find a working example here -> http://jsfiddle.net/ud3323/ZBAHS/

这篇关于Twitter Bootstrap折叠插件方向-水平而不是垂直的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！