Bootstrap 3折叠(从左到右)

Question

http://getbootstrap.com/javascript/#collapse

有没有办法让这个菜单从左向右滑动？我环顾四周并没有看到太多,但我想知道是否有人有更多的洞察力.

Answer 1

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

\n\n

.collapse {\n  height: auto;\n  width: auto;\n}\n\n.collapse.height {\n  position: relative;\n  height: 0;\n  overflow: hidden;\n  -webkit-transition: height 0.35s ease;\n  -moz-transition: height 0.35s ease;\n  -o-transition: height 0.35s ease;\n  transition: height 0.35s ease;\n}\n\n.collapse.width {\n  position: relative;\n  width: 0;\n  overflow: hidden;\n  -webkit-transition: width 0.35s ease;\n  -moz-transition: width 0.35s ease;\n  -o-transition: width 0.35s ease;\n  transition: width 0.35s ease;\n}\n\n.collapse.in.width {\n  width: auto;\n}\n\n.collapse.in.height {\n  height: auto;\n}    \n

\n\n

接下来，在目标元素（定义 .collapse 类的位置）上，您需要添加 .width 或 .height 类，具体取决于您想要设置动画的属性。

\n\n

最后，如果对宽度进行动画处理，则必须包装目标元素的内容并显式定义其宽度。如果对高度进行动画处理则不需要这样做。

\n\n

\n

Twitter Bootstrap Collapse 插件 Direction\xe2\x80\x94Horizo​​ntal 而不是 Vertical

\n

\n