我的example Codeply中的代码使用的是Bootstrap 4，但您的代码使用的是Bootstrap 5beta。如果您查看一下新的Bootstrap 5 spacing utility classes，您会发现...

• l（左侧）已替换为s（开始）
• r（右侧）已替换为e（结束）
  为什么左边距（ml-*）在Bootstrap 5中不起作用？

ml-auto不再存在，Bootstrap 5的等效项将为ms-auto：

<nav class="navbar navbar-expand-lg navbar-light bg-light">
    <div class="d-flex flex-grow-1">
        <span class="w-100 d-lg-none d-block">
            <!-- hidden spacer to center brand on mobile --></span>
        <a class="navbar-brand d-none d-lg-inline-block" href="#"> Navbar 6 </a>
        <a class="navbar-brand-two mx-auto d-lg-none d-inline-block" href="#">
            <img src="//placehold.it/40?text=LOGO" alt="logo">
        </a>
        <div class="w-100 text-right">
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#myNavbar">
                <span class="navbar-toggler-icon"></span>
            </button>
        </div>
    </div>
    <div class="collapse navbar-collapse flex-grow-1 text-right" id="myNavbar">
        <ul class="navbar-nav ms-auto flex-nowrap">
            <li class="nav-item">
                <a href="#" class="nav-link m-2 menu-item nav-active">Our Solution</a>
            </li>
            <li class="nav-item">
                <a href="#" class="nav-link m-2 menu-item">How We Help</a>
            </li>
            <li class="nav-item">
                <a href="#" class="nav-link m-2 menu-item">Blog</a>
            </li>
            <li class="nav-item">
                <a href="#" class="nav-link m-2 menu-item">Contact</a>
            </li>
        </ul>
    </div>
</nav>

演示：https://codeply.com/p/zzFC5XoyUm

为什么右边距（mr-*）在Bootstrap 5中不起作用？

此外，mr-auto已替换为me-auto。
在这里，您可以了解Bootstrap 5为什么使用start和end方法来改进RTL支持，因为left和right是绝对值，而start和end是相对值。
也可以使用flexbox实用程序（如justify-content-end），如此处所述

不要使用j ustify-content-end使用ms-auto
用于m- margin和p-padding

• t-用于设置上边距或上填充的类
• b-用于设置下边距或下填充的类
• s-用于在LTR中设置左边距或左填充，在RTL中设置右边距或右填充的类
• e-用于在LTR中设置右边距或右填充，在RTL中设置左边距或左填充的类
• x-用于同时设置 *-left和 *-right的类
• y-用于同时设置 *-top和 *-bottom的类

我实际上尝试了一种不同的方法，尽管灵感来自我之前的一些帖子。我想只将导航栏上的一些按钮（我的个人资料和登录按钮）右对齐，而将所有其他按钮保留在导航栏上。

遵循此流程

1.使用position-relative将导航栏的位置设置为相对位置
1.将要右对齐的按钮放在单独的<ul>中
1.将<ul>设置为绝对位置并位于末端，如下所示：<ul class="navbar-nav position-absolute end-0 mx-3">
1.在刚刚创建的<ul>之前创建一个空的<li>，以便在缩小屏幕时保持间距（因为绝对元素将与其他静态和相对元素重叠）。
1.将宽度设置为等于右对齐的<ul>（使用Chrome inspect元素确定）。例如<li class="nav-item" style="width: 150px"></li>

我的代码示例

{# Create Navbar #}
        <nav class="navbar navbar-expand-md navbar-dark bg-dark position-relative mb-4">
            <div class="container-fluid">
                <a class="navbar-brand" href="{{ path('home') }}">
                    <img src="/favicon/android-chrome-192x192.png" alt="Logo" style="height: 50px; width: 50px">
                    Company Name
                </a>
                <button class="navbar-toggler" type="button" data-coreui-toggle="collapse" data-coreui-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="collapse navbar-collapse" id="navbarCollapse">
                    <ul class="navbar-nav me-auto mb-2 mb-md-0">
                        <li class="nav-item">
                            <a class="nav-link" aria-current="page" href="{{ path('home') }}">Home</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="{{ path('guide_home') }}">Guide</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">About us</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Blog</a>
                        </li>
                        {# Invisible div to prevent overlap of absolute positioned elements #}
                        <li class="nav-item" style="width: 150px"></li>
                        <ul class="navbar-nav position-absolute end-0 mx-3">
                            {# Create a login or logout link depending whether a user is logged in or not #}
                            {% if app.user %}
                                <li class="nav-item">
                                    <a class="nav-link" href="{{ path('profile_home') }}">My Profile</a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link" href="{{ path('app_logout') }}">Logout</a>
                                </li>
                            {% else %}
                                <li class="nav-item">
                                    <a class="nav-link" href="{{ path('app_login') }}">Login/Register</a>
                                </li>
                            {% endif %}
                        </ul>
                    </ul>
                </div>
            </div>
        </nav>

整体

我发现与我见过的其他解决方案相比，这个方法更容易理解，也更容易让它工作。我希望这对其他看到这篇文章的人有用。如果你对我的方法有任何反馈，如果你有任何改进，请发表评论。谢谢！：）

**注意：**我的例子是在Symfony项目中使用twig模板完成的，以防你发现语法混乱。然而，所有的HTML对于任何开发工具都是一样的。

试试这个：

<div class="d-flex flex-row-reverse bd-highlight">
  <div class="p-2 bd-highlight">Flex item 1</div>
  <div class="p-2 bd-highlight">Flex item 2</div>
  <div class="p-2 bd-highlight">Flex item 3</div>
</div>

如果你有这个：

<!-- NAVIGATION -->
<nav class="navbar navbar-expand-lg navbar-light bg-light">
    <div class="d-flex flex-grow-1"> //modify this to include flex-row-reverse

我的工作：
在"ui"标记中使用此类：
"ms-auto"意思是"margin start"自动，这将使你的导航项与右边的角对齐。
这是为了：
在Bootstrap 5中，l（左）已替换为s（开始

如果没有其他帮助，您可以使用“justify-content-end”。

对于那些开始使用bootstrap 5（beta版）的人来说，类名几乎没有什么变化。
在 Bootstrap 中，“左”替换为“开始”，“右”替换为“结束”。
例如，在bootstrap 4中，我们有ml-auto，但在bootstrap 5中，我们必须使用ms-auto，类似地，对于mr，我们有me。
这同样适用于bootstrap中的每个类，无论“left”和“right”是由“l”和“r”表示，还是由“s”和“e”替换，如果它们在任何地方作为完整的单词（left和right）使用，则由“start”和“end”替换