html - Bootstrap 4.1 - 右对齐七个导航栏元素中的三个

Question

<分区>

Answer 1

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Alignment/Box_Alignment_in_Flexbox#There_is_no_justify-self_in_Flexbox

引用:“Flexbox 中没有 justify-self”

我们需要使用自动边距: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Alignment/Box_Alignment_in_Flexbox#Alignment_and_auto_margins

<!-- 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>    

CSS:

.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;
}

演示:https://codepen.io/carolmckayau/pen/pQqJZp