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屋！