Html 引导4.1-右对齐七个导航栏项目中的三个

我正在使用Bootstrap4.1，我正在制作一个包含七个菜单项的导航栏。我想对七个菜单项中的三个进行右对齐，但我不知道该如何编码。以下是我尝试过的一种方法（但不起作用）：

部门

资源

程序

新闻



新闻提要

OneDrive

地点

引用：“Flexbox中没有自我证明”

我们需要使用自动边距：

---

演示：

您需要使用css@卡罗尔-我查看了你的页面，但我没有看到一种方法可以将左右对齐的项目放在同一个页面中。这是一个副本：确保你按照文档中显示的方式进行操作。

行

未在导航栏中使用。Zim的建议也起了作用——这都要感谢他们！酷，我也从你问TomMolskow这个问题中学到了一些东西

<!-- Navigation Bar Menu Items -->

        <div class="navbar-collapse collapse" id="navbar">
          <ul class="nav navbar-nav mr-auto">
            <li class="nav-item"> 
               <a class="nav-link menuItemHover active" id="Departments" data-toggle="modal" data-target="#MyNNSModal" onclick="hideResourceHeader()">Departments</a></li>
            <li class="nav-item"> 
               <a class="nav-link menuItemHover active" id="Resources" data-toggle="modal" data-target="#MyNNSModal"  onclick="showResourceHeader()">Resources</a></li>
            <li class="nav-item"> 
               <a class="nav-link menuItemHover active" id="Procedures" data-toggle="modal" data-target="#MyNNSModal" onclick="hideResourceHeader()">Procedures</a></li>
            <li class="nav-item"> 
               <a class="nav-link menuItemHover active" id="News" data-toggle="modal" data-target="#MyNNSModal" onclick="hideResourceHeader()">News</a></li> 
<!--   just one list --   </ul>
        </div>

        <div class="d-flex align-self-end">
          <ul class="navbar-nav ml-auto">              -->
            <li class="nav-item"> 
               <a class="nav-link menuItemHover active" id="Newsfeed" data-toggle="modal" data-target="#MyNNSModal" onclick="hideResourceHeader()">Newsfeed</a></li>
            <li class="nav-item"> 
               <a class="nav-link menuItemHover active" id="OneDrive" data-toggle="modal" data-target="#MyNNSModal" onclick="hideResourceHeader()">OneDrive</a></li>
            <li class="nav-item"> 
               <a class="nav-link menuItemHover active" id="Sites" data-toggle="modal" data-target="#MyNNSModal" onclick="hideResourceHeader()">Sites</a></li>
          </ul>
        </div>    

.navbar-nav
{
  display:flex;
/*   justify-content:space-between; -- doesn't work when we want to achieve left / right layout */
  width:900px;
  padding-left:0; /* override browser style */
  list-style-type:none;
  background:pink;
}

/* push last three menu items to the right */
.nav-item:nth-of-type(5)
{
  margin-left:auto;
}

/* give the other menu items apart from the first menu item a left margin to space them out */
.nav-item:not(:nth-of-type(5)):not(:nth-of-type(1))
{
  margin-left:2em;
}