react bootstrap：导航条最后一项的右侧定位[重复]。

Question

这个问题在这里已经有了答案:

Bootstrap 4将导航条项目向右对齐。 (21个答案)

封闭 22天前.

我想使用Bootstrap和React来制作和上图一样的菜单。

但无论你怎么对齐，你都会得到一个像下图一样的菜单。

目前的来源看起来像这样。

 <Navbar expand="sm" bg="light" className="w-50 general_menu">
  <Nav>
   <Nav.Link className="active">Left One</Nav.Link>
   <Nav.Link>Left Two</Nav.Link>
   <Nav.Link>Left Three</Nav.Link>
   <Nav.Link className="border-left pl-2">Right One</Nav.Link>
  </Nav>
</Navbar>

请告诉我，我需要做什么改变才能把导航菜单最后一项放到上图中？

Answer 1

应用css到 Right One 链接。margin-left: auto 或添加类 ml-auto 到最后一个链接。

<Nav.Link className="border-left pl-2 ml-auto">Right One</Nav.Link>

Answer 2

使用左侧导航条内的css类。mr-auto.

<ul class="navbar-nav mr-auto">
  <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>
</ul>
<span class="navbar-text">
Place your right side element here
</span>

这段代码从原代码中获取 Bootstrap导航条.