Bootstrap 4 将许多导航栏链接之一拉到右侧

Question

我目前在尝试将许多导航栏链接之一拉到右侧时遇到问题。具体来说，在此示例中，我只想将注销链接拉到导航栏的右侧。我已经尝试了很多事情，例如justify-content-end在导航栏类级别将所有链接拉到右边，ml-auto但没有效果，pull-right就像我在引导程序和样式的早期版本中所做的那样，float:right因为我的想法已经用完了：P 请参阅下面的导航栏。感谢所有帮助

<nav class="navbar navbar-toggleable-md">
    <div>
        <span class="navbar-brand text-color">MYlestone</span>
    </div>
    <div>
        <div class="navbar-nav">
            <a class="nav-item nav-link" href="#" [routerLink]="['babyprofiles']">My Content</a>
            <a class="nav-item nav-link" href="#" [routerLink]="['about']">About</a>
            <a class="nav-item nav-link pull-right" href="#" (click)="logout()">Logout</a>
        </div>
    </div>
</nav>

Answer 1

Well.pull-*是行不通的，因为它在 Bootstrap 4 中被删除了，但.float-* 你在正确的轨道上.ml-auto；你只是没有在正确的点上应用它。

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js" integrity="sha384-a5N7Y/aK3qNeh15eJKGWxsqtnX/wWdSZSKp+81YjTmS15nvnvxKHuzaWwXHDli+4" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">


<nav class="navbar navbar-expand navbar-light bg-light">
  <span class="navbar-brand text-color">MYlestone</span>
	
  <div class="navbar-nav w-100">
    <a class="nav-item nav-link" href="#">My Content</a>
    <a class="nav-item nav-link" href="#">About</a>
      
    <div class="ml-auto">
      <a class="nav-item nav-link" href="#">Logout</a>
    </div>
  </div>
</nav>

首先，您需要添加.w-100到您的.navbar-nav元素以确保该元素占用 100% 的剩余空间。然后你需要将你的决赛包裹.nav-link在一个带有.ml-auto应用的包装器中。

我要提出的一个警告；可能有更好的方法：没有理由不能拥有多个.navbar-nav元素。只要它们在同一个折叠内，如果您选择使用它，它们就会浓缩到您的汉堡菜单中。

以下代码将获得与上述相同的结果；只需使用多个导航菜单：

<nav class="navbar navbar-expand navbar-light bg-light">
  <span class="navbar-brand text-color">MYlestone</span>

  <div class="navbar-nav">
    <a class="nav-item nav-link" href="#">My Content</a>
    <a class="nav-item nav-link" href="#">About</a>
  </div>

  <div class="navbar-nav ml-auto">
    <a class="nav-item nav-link" href="#">Logout</a>
  </div>
</nav>