如何在左侧打开twitter bootstrap子菜单？

Question

我试图在下拉菜单中创建twitter bootstrap子菜单,但我遇到了一个问题:我在页面的右上角有下拉菜单,该菜单还有一个子菜单.但是,当子菜单打开时 - 它不适合窗口并向右移动太多,因此用户只能看到第一个字母.如何使该子菜单不向右,而向左开？

Answer 1

如果我理解这一点,bootstrap就为这种情况提供了一个CSS类.将'pull-right'添加到菜单'ul':

<ul class="dropdown-menu pull-right">

..最终结果是菜单选项显示为右对齐,与他们下拉的按钮一致.

Answer 2

最简单的方法是将pull-left类添加到您的dropdown-submenu

<li class="dropdown-submenu pull-left">

jsfiddle:DEMO

Answer 3

Curent类.dropdown-submenu > .dropdown-menu有left: 100%;.因此,如果要打开左侧的子菜单,请将这些设置覆盖到负左侧位置.例如left: -95%;.现在您将在左侧获得子菜单,并且您可以调整其他设置以获得完美预览.

这是DEMO

编辑:OP的问题和我的答案是从2012年8月开始.同时,Bootstrap改变了,所以现在你有.pull-left类.那时候,我的回答是正确的.现在你不必手动设置css,你有.pull-left类.

编辑2:演示不起作用,因为Bootstrap改变了他们的URL.只需更改jsfiddle中的外部资源并用新的替换它们.

Answer 4

如果您使用bootstrap v4,则有一种新方法可以做到这一点.

你应该.dropdown-menu-right在.dropdown-menu元素上使用.

链接到代码:http://v4-alpha.getbootstrap.com/components/dropdowns/#menu-alignment

Answer 5

完成任务的正确方法是:

/* Submenu placement itself */
.dropdown-submenu > .dropdown-menu { left: auto; right: 100%; }
/* Arrow position */
.dropdown-submenu { position: relative; }
.dropdown-submenu > a:after { position: absolute; left: 7px; top: 3px; float: none; border-right-color: #cccccc; border-width: 5px 5px 5px 0; }
.dropdown-submenu:hover > a:after { border-right-color: #ffffff; }