bootstrap4菜单对齐，而右侧的下拉菜单

Question

使用Bootstrap 4.4，我尝试将菜单设置为居中，同时在调整大小时，将切换器和下拉菜单在右侧对齐。我尝试使用以下代码，但似乎不起作用：

<div class="container-fluid">
    <div class="row justify-content-center align-items-center">
        <div class="col-xl-6 col-lg-7">
            <nav class="navbar navbar-expand-lg navbar-light">
                <button type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="true" aria-label="Toggle navigation" class="navbar-toggler ml-auto">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div id="navbarNav" style="" class="navbar-collapse justify-content-center align-items-center collapse show">
                    <div class="menu-psc_main_menu-container">
                        <ul id="menu-psc_main_menu" class="navbar-nav align-itmes-right">
                            <li id="menu-item-8" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-8"><a href="#home">HOME</a></li>
                            <li id="menu-item-9" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-9"><a href="#TWO">TWO</a></li>
                            <li id="menu-item-10" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-10"><a href="#THREE">THREE</a></li>
                            <li id="menu-item-11" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-11"><a href="#FOUR">FOUR</a></li>
                            <li id="menu-item-12" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-12"><a href="#FIVE">FIVE</a></li>
                       </ul>
                    </div>
                </div>
            </nav>      
       </div>
   </div>
 </div>

这样，我将菜单居中，右侧的切换器位于m，左侧的下拉菜单。 我在引导文档中找不到解决方案。

谢谢。