如何使twitter bootstrap子菜单在左侧打开？
我试图在下拉菜单中创buildtwitter引导子菜单，但是我遇到了一个问题：我在页面的右上angular有下拉菜单，该菜单还有一个子菜单。 但是，当子菜单打开时，它不适合在窗口中，并向右移动太多，以便用户只能看到第一个字母。 如何使该子菜单不向右侧打开，而是向左侧打开？
最简单的方法是将dropdown-submenu添加到您的dropdown-submenu
<li class="dropdown-submenu pull-left">
jsfiddle： DEMO
如果我已经理解了这个权利，bootstrap就为这种情况提供了一个CSS类。 向菜单'ul'添加'向右拉'：
<ul class="dropdown-menu pull-right">
..最终的结果是菜单选项显示右alignment，与他们从下拉的button一致。
.dropdown-submenu > .dropdown-menu class .dropdown-submenu > .dropdown-menu left: 100%; 。 所以，如果您想要打开左侧的子菜单，请将这些设置覆盖到负的左侧位置。 例如left: -95%; 。 现在你会得到左侧的子菜单，你可以调整其他设置，以获得完美的预览。
这是DEMO
编辑：OP的问题和我的答案是从2012年8月。同时，Bootstrap改变了，所以现在你有了左派的课。 那时候，我的回答是正确的。 现在你不必手动设置CSS，你有那个.pull-left类。
编辑2：演示不工作，因为Bootstrap改变了他们的URL。 只需在jsfiddle中更改外部资源，并将其replace为新的。
做这个任务的正确方法是：
/* 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; }
如果你正在使用bootstrap v4，有一个新的方法来做到这一点。
你应该在.dropdown-menu元素上使用.dropdown-menu-right 。
链接到代码： http : //v4-alpha.getbootstrap.com/components/dropdowns/#menu-alignment
我已经创build了一个javascript函数，看看他是否有足够的空间在右侧。 如果有，他会显示在右侧，否则他会显示在左侧
经testing：
- Firefox（mac）
- Chorme（mac）
- Safari（mac）
使用Javascript：
$(document).ready(function(){ //little fix for the poisition. var newPos = $(".fixed-menuprofile .dropdown-submenu").offset().left - $(this).width(); $(".fixed-menuprofile .dropdown-submenu").find('ul').offset({ "left": newPos }); $(".fixed-menu .dropdown-submenu").mouseover(function() { var submenuPos = $(this).offset().left + 325; var windowPos = $(window).width(); var oldPos = $(this).offset().left + $(this).width(); var newPos = $(this).offset().left - $(this).width(); if( submenuPos > windowPos ){ $(this).find('ul').offset({ "left": newPos }); } else { $(this).find('ul').offset({ "left": oldPos }); } }); });
因为我不想在每个菜单项上添加这个修补程序，所以我在其上创build了一个新的类。 将固定菜单放在ul：
<ul class="dropdown-menu fixed-menu">
我希望这能为你解决。
PS。 safari和chrome中的小bug，第一次hover会把它放到mutch左边，如果我修好了，会更新这个post。
如果你只有一个级别，你使用bootstrap 3向ul元素添加pull-right
<ul class="dropdown-menu pull-right" role="menu">
如果你使用的是LESS CSS，我写了一个小小的mixin来通过连接箭头移动下拉菜单：
.dropdown-menu-shift( @num-pixels, @arrow-position: 10px ) { // mixin to shift the dropdown menu left: @num-pixels; &:before { left: -@num-pixels + @arrow-position; } // triangle outline &:after { left: -@num-pixels + @arrow-position + 1px; } // triangle internal }
然后移动一个带有dropdown-menu-x标识的.dropdown-menu ，你可以这样做：
#dropdown-menu-x { .dropdown-menu-shift( -100px ); }
你使用的是最新版本的bootstrap？ 我已经调整了stream体布局示例中的html，如下所示。 我添加了一个下拉菜单，通过添加右键菜单，将它放在最pull-right 。 当将鼠标hover在下拉菜单上时，它会自动拉到左侧，不会隐藏任何内容 – 所有菜单文本都可见。 我没有使用任何自定义的CSS。
<div class="navbar navbar-inverse navbar-fixed-top"> <div class="navbar-inner"> <div class="container-fluid"> <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </a> <a class="brand" href="#">Project name</a> <div class="nav-collapse collapse"> <ul class="nav pull-right"> <li class="active"><a href="#">Home</a></li> <li><a href="#about">About</a></li> <li><a href="#contact">Contact</a></li> <li class="dropdown open"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a> <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li class="divider"></li> <li class="nav-header">Nav header</li> <li><a href="#">Separated link</a></li> <li><a href="#">One more separated link</a></li> </ul> </li> </ul> <p class="navbar-text pull-right"> Logged in as <a href="#" class="navbar-link">Username</a> </p> </div><!--/.nav-collapse --> </div> </div> </div>
其实 – 如果你可以浮动dropdown包装 – 我发现它很容易添加navbar-right dropdown 。
这似乎是作弊，因为它不在导航栏中，但对我来说工作正常。
<div class="dropdown navbar-right"> ... </div>
然后，您可以直接在dropdown进一步自定义浮动…
<div class="dropdown pull-left navbar-right"> ... </div>
…或作为一个包装…
<div class="pull-left"> <div class="dropdown navbar-right"> ... </div> </div>
