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>

我在导航栏中添加了自定义类：navbar-flex
我从:after

.navbar

将此行为限制为比992px宽的屏幕 - 如果你想要*（768像素），请降低，但要测试你的元素是否适合较小的屏幕
此示例使用v4示例中的标记

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

logo：将坚持左侧
中.navbar-nav：它在右侧容器的徽标和内容之间居中，与每个容器保持相等的距离。
右侧容器（在此示例中为.inline-form）可以安全地替换为另一个.navbar-nav（您的），它将保持在右侧。

对于您的具体情况，请将.inline-form元素（.navbar的最后一个孩子）替换为您问题中的.navbar-nav（您还应该从其中移除float-xs-right类子女）;并将您想要居中的孩子移到中间.navbar-nav

如果你需要它的未加前缀版本，请点击这里：

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

如果您想要“装箱”，只需将其放入.container即可。

还有一件事：你为什么把你的问题命名为“Superposed nav-item right alignment”而不是“我如何在Bootstrap v4中居中导航条？”

::}＆lt;（（* *＆gt; ::

叠加的导航项右对齐

1 个答案: