Html Boostrap 4导航栏折叠菜单右对齐

我使用的是Bootstrap4，我试图通过单击折叠按钮在右侧而不是左侧打开弹出的菜单。我已经尝试在“ul”元素上使用“ml auto”。未折叠时，导航栏项正确位于右侧。折叠后，按钮正确地位于右侧，但菜单会在左侧弹出。我也尝试过在div中加入“ml auto”，但没有成功。这是我的HTML：

<nav class="navbar navbar-expand-lg navbar-dark fixed-top">
    <a class="navbar-brand" href="#home"><img id="logo" class="no-opacity" src="content/white-logo.png"></a>
    <button class="navbar-toggler ml-auto" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav ml-auto">
            <li class="nav-item">
                <a class="nav-link" href="#home"><i class="fa fa-home fa-fw" aria-hidden="true"></i>&nbsp;Home</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#about"><i class="fa fa-user fa-fw" aria-hidden="true"></i>&nbsp;About</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#projects"><i class="fa fa-folder-open fa-fw" aria-hidden="true"></i>&nbsp;Projects</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#experience"><i class="fa fa-briefcase fa-fw" aria-hidden="true"></i>&nbsp;Experience</a>
            </li>       
            <li class="nav-item">
                <a class="nav-link" href="#contact"><i class="fa fa-envelope fa-fw" aria-hidden="true"></i>&nbsp;Contact</a>
            </li>                     
        </ul>
    </div>
</nav>

---

我觉得有一个简单的解决办法，但我想不出来。谢谢你的帮助

只需在css中添加简单规则即可

 .nav-item{
    text-align: right;
}

根据，在导航栏的折叠下拉列表中居中、右对齐或左对齐的方法是使用

justify content end

和

nav

的

类中的朋友

例如。这段代码生成它后面的图像



{site.social%中链接的%s}


{%endfor%}

☰




现在将这一行修改为：

<div class="nav ml-auto justify-content-end">



屈服


注意：这显然与
ml auto
无关，当缺少时，会导致未折叠的菜单项（在更宽的屏幕上）无法正确对齐。（切换按钮本身对我来说总是右对齐。）只有
justify
似乎可以控制未折叠菜单中的内容。
只需在HTML中使用“文本右对齐”

例如：

这是一个如此简单的解决方案。非常感谢。这在引导程序4中对我不起作用。它确实将文本右对齐，但由于我的导航项目受宽度限制，因此它们最终仍然位于左侧。