php Bootstrap 4 导航栏下拉菜单项右侧

Bootstrap 4 Navbar Dropdown Menu Items Right

提问by eylay

As you see in the picture below, when I click on the bell icon, a dropdown menu appears at the bottom-right of the icon. I want this dropdown menu to appear at bottom-left instead of bottom-right. What should I do?

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

If you want to see my code, it's written with php:

如果你想看我的代码，它是这样写的php：

function navigation(){
    $output = "";
    $icons = ["user","bell","envelope","commenting"];
    $rows = [2,5,5,5];
    for ($i=0; $i < count($icons) ; $i++) {
      $output .= '<div class="dropdown">';
      $output .= '<a class="nav-item nav-link" data-toggle="dropdown">';
      $output .= '<i class="fa fa-'.$icons[$i].'"></i></a>';
      $output .= '<div class="dropdown-menu text-right">';
      for ($j=0; $j < $rows[$i] ; $j++) {
        $output .= '<a href="#" class="dropdown-item">'.($j+1).'</a>';
      }
      $output .= '</div>';
      $output .= '</div>';
    }
    return $output;
  }

And then, this output will be echoed in an html file:

然后，此输出将在 html 文件中回显：

<nav class="navbar">
  <div class="container">
    <div class="navbar-nav d-flex flex-row">
      <?= navigation() ?>
    </div>
  </div>
</nav>

回答by Zim

Use the dropdown-menu-rightclass to align the items inside the menu right..

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

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

回答by Javan R.

Update for Bootstrap4-Beta:

Bootstrap4-Beta 更新：

Because there is a bug in bootstrap4 betai had to add

因为bootstrap4 beta 中存在一个错误，所以我必须添加

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

to make it work.

使其工作。

回答by Fred K

.dropdown-menu-rightclass has a different behaviour if it's inside a .navbar. You can read the "Heads up" in the docs here:

.dropdown-menu-right如果类位于.navbar. 您可以在此处阅读文档中的“注意事项”：

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

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

Actually to solve I use this class:

实际上要解决我使用这个类：

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

回答by mohammad kasiri

I Chaned it by add dir="rtl"

我通过添加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>

回答by migli

I encountered the same problem with an additional difficulty because my menu is created in PHP - the number of elements and dropdown content is not fixed.

我遇到了同样的问题，但遇到了额外的困难，因为我的菜单是用 PHP 创建的 - 元素和下拉内容的数量不固定。

Here is a solution that centers dropdowns when possible, otherwise align them on the left or rightto prevent them from exceeding the viewport:

这是一个解决方案，在可能的情况下将下拉列表居中，否则将它们在左侧或右侧对齐以防止它们超出视口：

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

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

回答by Anand Raja

It's little change in boostrap 4. To align navbar to right side, you've to make only two changes. they are:

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

1. in navbar-navclass add w-100as navbar-nav w-100to make width as 100
2. in nav-item dropdownclass add ml-autoas nav-item dropdown ml-autoto make margin left as auto.

1. 在navbar-nav课堂上添加w-100asnavbar-nav w-100使宽度为 100
2. 在nav-item dropdown课堂上添加ml-autoasnav-item dropdown ml-auto使边距保留为自动。

If you didn't understand, please refer this

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

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

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