如何将 bootstrap 4 中的单个菜单项向右移动

Question

我正在使用 Bootstrap 4 作为我现在正在做的 Laravel 8 博客系统的一部分。菜单项就位，但我想将最后一个菜单项移到右边。我尝试了很多选项，包括 ml-auto 但它对项目没有任何影响。我也尝试从以前的类似帖子中受益，但事实证明它们都不适用于我的情况。我将非常感谢在这方面的任何帮助。请在下面找到我的代码：

  <nav class="navbar navbar-expand-lg navbar-light navbar-dark bg-dark">
    <div class="container-fluid">
      <a class="navbar-brand" href="#">{{config('app.name', 'Learning')}}</a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
        <div class="nav navbar-nav">

          <a class="nav-link" href="/">Home</a>
          <a class="nav-link" href="/about">About Us</a>
          <a class="nav-link" href="/services">Services</a>
          <a class="nav-link" href="/posts">Blog</a>
          <a class="nav-link" href="/posts/create">Create Post</a>

        </div>
      </div>
    </div>
  </nav>

Answer 1

您可以通过添加此 css 行来做到这一点：

.nav-link:last-child {
    right: 0;
    position: absolute;
}

Answer 2

第一个问题是你说你用的是Bootstrap4，但是你的语法是Bootstrap5。data-bs-*属性是给B5的，B4只有data-*属性。

然后为了将最后一项右对齐，首先您需要 navbar-nav 占据所有宽度，因此向其添加 w-100。然后你需要最后一项来填充所有剩余的 space，你可以通过添加 flex-fill 来完成。然后您需要做的就是将 text-end 添加到同一元素。您的代码变为：

<div class="nav navbar-nav w-100">
    <a class="nav-link" href="/">Home</a>
    <a class="nav-link" href="/about">About Us</a>
    <a class="nav-link" href="/services">Services</a>
    <a class="nav-link" href="/posts">Blog</a>
    <a class="nav-link flex-fill text-end" href="/posts/create">Create Post</a>
</div>

JSFiddle

再说一遍，如果你确实用的不是B5，而是B4，那就把所有的data-bs-*属性改成只用data-*，text-end也变成text-right。

如何将 bootstrap 4 中的单个菜单项向右移动

How to shift a single menu item in bootstrap 4 to the right

html

css

html-lists

twitter-bootstrap

bootstrap-4