反应bootstrap：导航栏最后一项右手定位

Question

我想使用 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 class 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 Navbar。

Answer 2

将 css 应用到 Right One link: margin-left: auto 或将 class ml-auto 添加到最后 link:

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

反应bootstrap：导航栏最后一项右手定位

react bootstrap: navbar last item right-hand positioning

alignment

navbar

reactjs

react-native

bootstrap-4