我试图在下拉菜单中创建 twitter 引导子菜单，但我遇到了一个问题：我在页面右上角有下拉菜单，而该菜单还有一个子菜单。但是，当子菜单打开时 - 它不适合窗口并且向右移动太多，因此用户只能看到第一个字母。如何使该子菜单不向右打开，而是向左打开？
【问题讨论】：
.dropdown 容器上添加 .pull-right。
标签： javascript jquery css twitter-bootstrap
如果我理解正确的话，bootstrap 为这种情况提供了一个 CSS 类。将“pull-right”添加到菜单“ul”中：
<ul class="dropdown-menu pull-right">
..最终结果是菜单选项显示为右对齐，与它们下拉的按钮一致。
【讨论】：
pull-right 类来实现这一点。【讨论】：
.dropdown-submenu.pull-left>.dropdown-menu { width: 100%; } 不是一个优雅的解决方案，但似乎工作jsfiddle.net/r1v90tas
当前类.dropdown-submenu > .dropdown-menu 有left: 100%;。因此，如果您想在左侧打开子菜单，请将这些设置覆盖到负左位置。例如left: -95%;。现在您将在左侧获得子菜单，您可以调整其他设置以获得完美的预览。
这里是DEMO
编辑：OP 的问题和我的回答来自 2012 年 8 月。与此同时，Bootstrap 发生了变化，所以现在你有了 .pull-left 类。那时，我的回答是正确的。现在你不必手动设置 css，你有那个 .pull-left 类。
编辑 2：演示不起作用，因为 Bootstrap 更改了它们的 URL。只需更改 jsfiddle 中的外部资源并用新资源替换即可。
【讨论】：
left: -90%;（否则我无法将鼠标移动到那个子菜单，因为它会消失）。
如果您使用的是 bootstrap v4，则有一种新方法可以做到这一点。
您应该在.dropdown-menu 元素上使用.dropdown-menu-right。
<div class="btn-group">
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Right-aligned menu
</button>
<div class="dropdown-menu dropdown-menu-right">
<button class="dropdown-item" type="button">Action</button>
<button class="dropdown-item" type="button">Another action</button>
<button class="dropdown-item" type="button">Something else here</button>
</div>
</div>
代码链接：https://getbootstrap.com/docs/4.0/components/dropdowns/#menu-items
【讨论】：
dropleft 和 dropright，但答案的上下文是正确的。谢谢！
完成任务的正确方法是：
/* 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; }
【讨论】：
.dropdown-submenu { position: relative; text-align:right; } 当箭头向左时将文本定位在右侧。
我创建了一个 javascript 函数，用于查看他在右侧是否有足够的空间。 如果有，他会显示在右侧，否则他会显示在左侧
测试于：
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 });
}
});
});
因为我不想在每个菜单项上都添加此修复程序，所以我在其上创建了一个新类。 将固定菜单放在 ul:
<ul class="dropdown-menu fixed-menu">
我希望这对你有用。
ps。 safari 和 chrome 中的小错误，第一次悬停会将其放置到左侧，如果我修复它会更新这篇文章。
【讨论】：
如果您只有一个级别并且使用引导程序 3，请将 pull-right 添加到 ul 元素
<ul class="dropdown-menu pull-right" role="menu">
【讨论】：
实际上 - 如果您可以浮动 dropdown 包装器 - 我发现它就像将 navbar-right 添加到 dropdown 一样简单。
这看起来像是作弊，因为它不在导航栏中，但对我来说很好。
<div class="dropdown navbar-right">
...
</div>
然后您可以直接在dropdown 中使用pull-left 进一步自定义浮动...
<div class="dropdown pull-left navbar-right">
...
</div>
...或者作为它的包装器...
<div class="pull-left">
<div class="dropdown navbar-right">
...
</div>
</div>
【讨论】：
如果你使用的是 LESS CSS，我写了一个小混入来用连接箭头移动下拉列表：
.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
}
然后移动一个 id 为dropdown-menu-x 的.dropdown-menu 例如，你可以这样做：
#dropdown-menu-x {
.dropdown-menu-shift( -100px );
}
【讨论】：
我创建了一个 javascript 函数，用于查看他在右侧是否有足够的空间。如果有，他将在右侧显示，否则他将在左侧显示。同样，如果右侧有足够的空间，它将显示右侧。这是一个循环......
$(document).ready(function () {
$('body, html').css('overflow', 'hidden');
var screenWidth = $(window).width();
$('body, html').css('overflow', 'visible');
if (screenWidth > 767) {
$(".dropdown-submenu").hover(function () {
var dropdownPosition = $(this).offset().left + $(this).width() + $(this).find('ul').width();
var newPosition = $(this).offset().left - $(this).find('ul').width();
var windowPosition = $(window).width();
var oldPosition = $(this).offset().left + $(this).width();
//document.title = dropdownPosition;
if (dropdownPosition > windowPosition) {
$(this).find('ul').offset({ "left": newPosition });
} else {
$(this).find('ul').offset({ "left": oldPosition });
}
});
}
});
【讨论】：
您使用的是最新版本的引导程序吗？我已经改编了来自the Fluid Layout example 的html，如下所示。我添加了一个下拉菜单，并通过添加 pull-right 类将其放置在最右侧。当悬停在下拉菜单上时，它会自动拉到左侧并且没有任何隐藏 - 所有菜单文本都是可见的。我没有使用任何自定义 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>
【讨论】：
你唯一需要做的就是
<ul style='left:-100%'>
您要在右侧显示的菜单。
【讨论】：