如下图所示，当我点击铃铛图标时，图标的右下方会出现一个下拉菜单。我希望这个下拉菜单出现在左下角而不是右下角。我应该怎么办？
<nav class="navbar">
<div class="container">
<div class="navbar-nav d-flex flex-row">
...
</div>
</div>
</nav>
问问题
39298 次
7 回答
58
引导程序 5（2021 年更新）
使用上的dropdown-menu-end类dropdown-menu将菜单内的项目右对齐..
<div class="dropdown-menu dropdown-menu-end">
<a class="dropdown-item" href="#">Link</a>
<a class="dropdown-item" href="#">Link</a>
<a class="dropdown-item" href="#">Link</a>
</div>
https://codeply.com/p/kWLLKdjdpC
Bootstrap 4（原始答案）
使用dropdown-menu-right该类将菜单内的项目右对齐..
<div class="dropdown-menu dropdown-menu-right text-right">
<a class="dropdown-item" href="#">Link</a>
<a class="dropdown-item" href="#">Link</a>
<a class="dropdown-item" href="#">Link</a>
</div>
于 2017-05-09T11:02:32.943 回答
18
Bootstrap4-Beta 更新：
因为bootstrap4 beta 中有一个错误，所以我必须添加
.dropdown-menu-right {
right: 0;
left: auto;
}
让它工作。
于 2017-08-17T09:40:23.517 回答
8
.dropdown-menu-right如果类在.navbar. 您可以在此处阅读文档中的“注意”：
https://getbootstrap.com/docs/4.0/components/dropdowns/#menu-alignment
实际上要解决我使用这个类：
.navbar .dropdown-menu-right {
right: 0;
left: auto;
}
于 2018-03-20T11:56:29.487 回答
1
引导程序 5
@Zim 的答案可能是文档中建议的最正确的答案。
尽管如此，我设法使它工作的唯一方法是使用end-0该类。
<ul class="dropdown-menu end-0">
<li><a class="dropdown-item" href="#">Save</a></li>
<li><a class="dropdown-item" href="#">Fetch</a></li>
</ul>
于 2021-08-03T17:14:41.707 回答
1
我通过添加dir="rtl"改变了它
<div class="dropdown-menu " dir="rtl" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item " href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
于 2020-02-20T10:10:16.470 回答
1
boostrap 4 的变化很小。要将导航栏与右侧对齐，您只需进行两项更改。他们是：
- 在
navbar-nav课堂上添加使宽度为w-100100navbar-nav w-100 - 在
nav-item dropdown类中添加ml-auto以nav-item dropdown ml-auto使边距保持为自动。
如果你不明白，请参考这个
于 2019-10-20T15:44:59.843 回答
0
我遇到了同样的问题，但遇到了额外的困难，因为我的菜单是用 PHP 创建的——元素的数量和下拉内容的数量不固定。
这是一个尽可能将下拉菜单居中的解决方案，否则将它们左对齐或右对齐以防止它们超出视口：
var $maxWidthElement = $('.navbar'),
maxWidth = $maxWidthElement.width();
var positionDropdowns = function() {
$('.dropdown-menu').each(function() {
var $navItem = $(this).closest('.dropdown'),
dropdownWidth = $(this).outerWidth(),
dropdownOffsetLeft = $navItem.offset().left,
dropdownOffsetRight = maxWidth - (dropdownOffsetLeft + dropdownWidth),
linkCenterOffsetLeft = dropdownOffsetLeft + $navItem.outerWidth() / 2;
if ((linkCenterOffsetLeft - dropdownWidth / 2 > 0) & (linkCenterOffsetLeft + dropdownWidth / 2 < maxWidth)) {
// center the dropdown menu if possible
$(this).css('left', -(dropdownWidth / 2 - $navItem.outerWidth() / 2));
} else if ((dropdownOffsetRight < 0) & (dropdownWidth < dropdownOffsetLeft + $navItem.outerWidth())) {
// set the dropdown menu to left if it exceeds the viewport on the right
$(this).addClass('dropdown-menu-right');
} else if (dropdownOffsetLeft + dropdownWidth > maxWidth) {
// full width if the dropdown is too large to fit on the right
$(this).css({
left: 0,
right: 0,
width:
$(this)
.closest('.container')
.width() + 'px'
});
}
});
};
var resizeTimer;
$(window).on('resize', function(e) {
clearTimeout(resizeTimer);
resizeTimer = setTimeout(function() {
maxWidth = $maxWidthElement.width();
positionDropdowns();
}, 250);
});
positionDropdowns();
window.onresize = positionDropdowns;
于 2018-12-28T11:31:47.183 回答