我试图在下拉菜单中创建 twitter 引导子菜单，但我遇到了一个问题：我在页面的右上角有下拉菜单，并且该菜单还有一个子菜单。但是，当子菜单打开时 - 它不适合窗口并且向右移动太多，因此用户只能看到第一个字母。如何使该子菜单不向右打开，而是向左打开？
问问题
172720 次
12 回答
118
如果我理解这一点，bootstrap 为这种情况提供了一个 CSS 类。将 'pull-right' 添加到菜单 'ul' 中：
<ul class="dropdown-menu pull-right">
..最终结果是菜单选项显示为右对齐，与它们下拉的按钮一致。
于 2014-01-24T14:31:07.007 回答
111
于 2013-05-10T15:16:14.727 回答
26
当前班级.dropdown-submenu > .dropdown-menu有left: 100%;。因此，如果您想在左侧打开子菜单，请将这些设置覆盖到负左位置。例如left: -95%;. 现在您将在左侧获得子菜单，您可以调整其他设置以获得完美的预览。
这是演示
编辑：OP 的问题和我的回答来自 2012 年 8 月。与此同时，Bootstrap 发生了变化，所以现在你有了 .pull-left 类。那时，我的回答是正确的。现在你不必手动设置 css，你有那个 .pull-left 类。
编辑 2：演示不起作用，因为 Bootstrap 更改了它们的 URL。只需更改 jsfiddle 中的外部资源并用新资源替换它们。
于 2012-08-30T00:20:17.533 回答
22
如果您使用的是 bootstrap v4，则有一种新方法可以做到这一点。
您应该.dropdown-menu-right在.dropdown-menu元素上使用。
<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
于 2016-04-16T18:35:51.757 回答
13
完成任务的正确方法是：
/* 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; }
于 2013-12-02T19:40:26.803 回答
4
我创建了一个 javascript 函数，用于查看他的右侧是否有足够的空间。如果有，他会在右侧显示，否则他会在左侧显示
测试：
- 火狐 (Mac)
- 乔姆 (mac)
- 野生动物园（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 });
}
});
});
因为我不想在我创建了一个新类的每个菜单项上添加此修复程序。将固定菜单放在 ul 上：
<ul class="dropdown-menu fixed-menu">
我希望这对你有用。
附言。safari 和 chrome 中的小错误，如果我修复它，第一次悬停会将它放在左边的 mutch 将更新这篇文章。
于 2012-10-12T14:37:58.063 回答
4
如果您只有一个级别并且使用 bootstrap 3 添加pull-right到ul元素
<ul class="dropdown-menu pull-right" role="menu">
于 2016-11-18T14:27:47.960 回答
2
实际上 - 如果你对浮动dropdown包装器感到满意 - 我发现它就像添加navbar-right到dropdown.
这似乎是作弊，因为它不在导航栏中，但对我来说效果很好。
<div class="dropdown navbar-right">
...
</div>
然后，您可以pull-left直接在dropdown...
<div class="dropdown pull-left navbar-right">
...
</div>
...或作为它的包装...
<div class="pull-left">
<div class="dropdown navbar-right">
...
</div>
</div>
于 2015-05-05T13:37:42.550 回答
1
如果你使用的是 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
}
然后移动一个.dropdown-menuiddropdown-menu-x例如，你可以这样做：
#dropdown-menu-x {
.dropdown-menu-shift( -100px );
}
于 2013-06-04T17:21:45.577 回答
1
我创建了一个 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 });
}
});
}
});
于 2018-04-20T09:53:39.977 回答
0
您使用的是最新版本的引导程序吗？我已经改编了流体布局示例中的 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>
于 2012-08-29T23:02:25.433 回答
0
你唯一需要做的就是
<ul style='left:-100%'>
您想在右侧显示的菜单。
于 2020-08-18T06:38:08.173 回答