Question

我正在使用Bootstrap 4.1，正在制作具有七个菜单项的Navbar。我想对7个菜单项中的3个进行辩护，但是我不确定该如何编码。这是我尝试过的一种方法（但不起作用）：

<div class="navbar navbar-inverse navbar-fixed-top">
   <div class="container-fluid">
      <div class="navbar-header"></div>
   </div>
</div>

    <!-- Navigation Bar -->

    <nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">

      <div class="container-fluid">
        <div class="row" >

        <a class="navbar-brand" href="#">MyNNS</a>
       
        <!-- 'Hamburger' - Shown When Menu is on Small Width Screen -->
        
        <button class="navbar-toggler collapsed" aria-expanded="false" aria-controls="navbar" aria-label="Toggle navigation" type="button" data-toggle="collapse" data-target="#navbar">
             <span class="navbar-toggler-icon"></span> 
        </button>

      <!-- 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> 
          </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>    

        </div> 
      </div>
    </nav>

除了align-self-end外，我还尝试了justify-content-end和navbar-right。

我的JSFiddle代码示例在这里：https://jsfiddle.net/tsmolskow/aq9Laaew/283001/

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

quote：“ Flexbox中没有理由自我”

我们需要使用自动边距： 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

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

1 个答案: