使用Bootstrap 4在桌面屏幕右侧的菜单 _WordPress主题

我是WordPress开发的新手, 我希望学习尽可能多。我正在从头开始构建主题, 并使用wp-bootstrap-navwalker(https://github.com/wp-bootstrap/wp-bootstrap-navwalker)作为我的显示的后备。
这是我目前拥有的：

文章图片
如何将菜单选项移至屏幕右侧, 从而影响移动版本, 如下所示？

文章图片
【使用Bootstrap 4在桌面屏幕右侧的菜单】我想保持移动版本不变, 只是将桌面版本移到右侧-我尝试应用不同的属性以使其移到右侧, 但是移动版本不起作用。
这是代码：header.php

< nav class="navbar navbar-expand-md navbar-dark bg-primary"> < div class="container"> < a class="navbar-brand" href="http://www.srcmini.com/#"> Navbar< /a> < button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-controls="bs-example-navbar-collapse-1" aria-expanded="false" aria-label="Toggle navigation"> < span class="navbar-toggler-icon"> < /span> < /button> < ?php wp_nav_menu( array( 'theme_location'=> 'header-menu', 'depth'=> 2, // 1 = no dropdowns, 2 = with dropdowns. 'container'=> 'div', 'container_class' => 'collapse navbar-collapse', 'container_id'=> 'bs-example-navbar-collapse-1', 'menu_class'=> 'navbar-nav mr-auto', 'fallback_cb'=> 'WP_Bootstrap_Navwalker::fallback', 'walker'=> new WP_Bootstrap_Navwalker(), ) ); ?> < /div>

#1 使用以下内容进行锻炼：

.navbar-collapse > ul {margin-left: auto!important; }

#2 你可以在保存菜单的< div> 上使用Bootstrap类justify-content-end(带有navbar-collapse类的菜单)。检查下一个样本：

< script src="http://img.readke.com/220527/1KALA7-2.jpg" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"> < /script> < script src="http://img.readke.com/220527/1KAK5F-3.jpg" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"> < /script> < link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"> < script src="http://img.readke.com/220527/1KAL635-4.jpg" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"> < /script> < nav class="navbar navbar-dark navbar-expand-md bg-primary"> < a class="navbar-brand" href="http://www.srcmini.com/#"> Navbar< /a> < button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".navbar-collapse"> < span class="navbar-toggler-icon"> < /span> < /button> < div class="navbar-collapse collapse justify-content-end"> < ul class="navbar-nav"> < li class="nav-item"> < a class="nav-link" href="http://www.srcmini.com/#"> Home< /a> < /li> < li class="nav-item"> < a class="nav-link" href="http://www.srcmini.com/#"> Staff< /a> < /li> < li class="nav-item"> < a class="nav-link" href="http://www.srcmini.com/#"> Specialty Area< /a> < /li> < li class="nav-item"> < a class="nav-link" href="http://www.srcmini.com/#"> Research Tools< /a> < /li> < li class="nav-item"> < a class="nav-link" href="http://www.srcmini.com/#"> More< /a> < /li> < /ul> < /div> < /nav>