Php 引导4导航栏下拉菜单项-右侧

如下图所示，当我单击钟形图标时，图标右下角会出现一个下拉菜单。我希望此下拉菜单显示在左下角，而不是右下角。我该怎么办

如果您想查看我的代码，它是用

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

函数导航（）{
$output=“”；
$icons=[“用户”、“铃声”、“信封”、“评论”]；
$rows=[2,5,5,5]；
对于（$i=0；$i

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

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

引导程序5（更新2021）

使用

下拉菜单上的
下拉菜单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>

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

Bootstrap4测试版更新：

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;

因为我必须补充一点

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

使其工作。
.dropdown menu right
类在
.navbar
中时具有不同的行为。您可以在此处阅读文档中的“提示”：


实际上，为了解决这个问题，我使用了这个类：

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

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

var$maxWidthElement=$（'.navbar'），
maxWidth=$maxWidthElement.width（）；
变量位置下拉列表=函数（）{
$（'.dropdown menu'）。每个（函数（）{
var$navItem=$（this）.closest（'.dropdown'），
dropdownWidth=$（this）.outerWidth（），
dropdownOffsetLeft=$navItem.offset（）.left，
DropDownOffsetLight=maxWidth-（dropdownOffsetLeft+dropdownWidth），
linkCenterOffsetLeft=dropdownOffsetLeft+$navItem.outerWidth（）/2；
如果（（linkCenterOffsetLeft-dropdownWidth/2>0）和（linkCenterOffsetLeft+dropdownWidth/2maxWidth）{
//如果下拉列表太大而无法放在右侧，则为全宽
$（this.css）({
左:0,，
右:0,，
宽度：
$（本）
.closest（“.container”）
.width（）+“px”
});
}
});
};
var树脂定时器；
$（窗口）.on（'resize'，函数（e）{
clearTimeout（resizeTimer）；
resizeTimer=setTimeout（函数（）{
maxWidth=$maxWidthElement.width（）；
位置下拉列表（）；
}, 250);
});
位置下拉列表（）；
window.onresize=位置下拉列表；

boostrap 4的变化很小。
要将导航栏对齐到右侧，只需进行两次更改。
它们是：

在
navbar-nav
类中，添加
w-100
as
navbar-nav w-100
使宽度为100
在
nav item下拉列表中
class添加
ml auto
as
nav item下拉列表ml auto
以使左边距为auto
如果您不明白，请参阅此

我通过add dir=“rtl”更改了它


谢谢-我希望避免添加CSS，但这样做成功了。在屏幕外时，视口中的位置菜单和对齐
文本右侧都可以使用。