Bootstrap 导航栏下拉菜单项右侧

Posted 2023-03-06

【中文标题】Bootstrap 导航栏下拉菜单项右侧

【英文标题】：Bootstrap Navbar Dropdown Menu Items Right

【发布时间】：2017-10-07 14:43:44

【问题描述】：

如下图所示，当我点击铃铛图标时，图标的右下方会出现一个下拉菜单。我希望这个下拉菜单出现在左下角而不是右下角。我该怎么办？

<nav class="navbar">
  <div class="container">
    <div class="navbar-nav d-flex flex-row">
      ...
    </div>
  </div>
</nav>

【参考方案1】：

引导程序 5（2021 年更新）

使用dropdown-menu 上的dropdown-menu-end 类将菜单内的项目右对齐..

    <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>

http://codeply.com/go/6Mf9aK0P8G

【讨论】：

在屏幕外时可以在视口中定位菜单并对齐text-right。

【参考方案2】：

Bootstrap4-Beta 更新：

因为有一个bug in bootstrap4 beta我不得不添加

.dropdown-menu-right  
    right: 0; 
    left: auto; 

让它工作。

【讨论】：

谢谢 - 我希望避免添加 CSS，但这成功了。

【参考方案3】：

.dropdown-menu-right 类如果在 .navbar 内，则会有不同的行为。您可以在此处阅读文档中的“注意事项”：

https://getbootstrap.com/docs/4.0/components/dropdowns/#menu-alignment

其实我用这个类来解决：

.navbar .dropdown-menu-right  
    right: 0; 
    left: auto; 

【参考方案4】：

我遇到了同样的问题，但又遇到了额外的困难，因为我的菜单是用 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;

https://codepen.io/migli/pen/RELPPj

【参考方案5】：

boostrap 4 的变化不大。 要将导航栏与右侧对齐，您只需进行两项更改。 他们是：

在navbar-nav 类中添加w-100 为navbar-nav w-100 使宽度为100 在nav-item dropdown 类中添加ml-auto 为nav-item dropdown ml-auto 以使剩余边距为自动。

如果你不明白，请参考这里

https://***.com/a/58474527/10907720

【参考方案6】：

我添加了 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>

【参考方案7】：

引导程序 5

@Zim 的答案可能是最正确的as suggested in the docs。

尽管如此，我设法使它工作的唯一方法是改用 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>