Question

我目前在尝试向右侧拉出许多导航栏链接时遇到问题。具体来说，在这个例子中，我只想拉出导航栏右侧的注销链接。我在导航栏类级别尝试了许多诸如justify-content-end之类的东西，它将所有链接向右移动，ml-auto无效，pull-right就像我在之前版本的bootstrap中所做的那样样式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

好.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>

Bootstrap 4将许多导航栏链接中的一个拉到右侧

1 个答案: