叠加导航项右对齐

Question

使用 Bootstrap 4，我需要将所有导航栏元素右对齐，除了我想要在中间的元素：

<ul class="nav navbar-nav">
   <li class="nav-item float-xs-right">
       <a class="nav-link" href="/logout">Sign out</a>
   </li>
   <li class="nav-item float-xs-right">
       <a class="nav-link" href="/application/settings">Configuration</a>
   </li>
   <li class="nav-item float-xs-right">
           <a class="nav-link" href="/application/settings">admin@mysite.com</a>
       </li>
   <li class="nav-item float-xs-right">
       <a class="nav-link" href="/about">About</a>
   </li>
</ul>

Configuration项叠加Sign Out项，如下图：

1) 叠加怎么解？

2) 如果我想让一个项目（例如About）留在菜单中间（而不是右边）怎么办？

Answer 1

到目前为止，您无法在 v4 中将项目居中，但这里有一个解决方案：

@media (min-width: 992px) {
  .navbar-flex {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -moz-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
  }
  .navbar.navbar-flex:after {
    content: none;
  }
}
.navbar-flex > *:last-child {
  padding-left: 1rem;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" integrity="sha384-AysaV+vQoT3kOAXZkl02PThvDr8HYKPZhNT5h/CXfBThSRXQ6jW5DO2ekP5ViFdi" crossorigin="anonymous">
<nav class="navbar navbar-dark bg-inverse navbar-flex">
    <a class="navbar-brand" href="#">Navbar</a>
    <ul class="nav navbar-nav">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Features</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Pricing</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">About</a>
      </li>
    </ul>
    <form class="form-inline float-xs-right">
      <input class="form-control" type="text" placeholder="Search">
      <button class="btn btn-outline-info" type="submit">Search</button>
    </form>
  </nav>

• 我添加了自定义 class: navbar-flex 到导航栏
• 我从 .navbar
中删除了 :after pseudo-element
• 将此行为限制在比 992px 宽的屏幕上 - 如果需要 *(768px)，请降低屏幕宽度，但要测试您的元素是否适合较小的屏幕
• 此示例使用 v4 示例中的标记

导航栏中现在有三个元素：

• 标志：会贴在左边
• 中间 .navbar-nav：这在徽标和 right-side 容器的内容之间居中，与每个容器保持相等的距离。
• right-side 容器（在这个例子中，一个 .inline-form）可以安全地替换为另一个 .navbar-nav（你的）并且它会粘在右边。

针对您的具体情况，将 .inline-form 元素（.navbar 的最后一个 child）替换为问题中的 .navbar-nav（您还应该删除 float-xs-right classes 来自其 children);然后将你想要的 child 移动到中间 .navbar-nav

如果您需要 un-prefixed 版本，这里是：

@media (min-width: 992px) {
 .navbar-flex {
    display: flex;
    justify-content: space-between;
  }
  .navbar.navbar-flex:after {
    content: none;
  }
}
.navbar-flex > *:last-child {
  padding-left: 1rem;
}

如果您想要 "boxed"，只需将它放入 .container。

还有一件事：你为什么将问题命名为 "Superposed nav-item right alignment" 而不是 "How can I center a navbar item in Bootstrap v4?"

::<(((*>::