我的导航栏没有随着 mr-auto 向右移动？

Question

我使用 mr-auto 尝试将导航栏向右移动，但它不起作用。我不确定为什么。谁能解释一下。这是我的代码：

<nav class="navbar navbar-expand-lg navbar-light">
            <div class="container-fluid">
              <a class="navbar-brand" href="#"><img src="/img/logo.png" alt="logo"></a>
              <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
              </button>
              <div class="collapse navbar-collapse" id="navbarNav">
                <div class="mr-auto"></div>
                <ul class="navbar-nav">
                  <li class="nav-item">
                    <a class="nav-link active" aria-current="page" href="#">Home</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" href="#">About Me</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" href="#">Projects</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" href="#">Skills</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" href="#">Contigency Plans</a>
                  </li>

Answer 1

你的 mr-auto 不应该是 <ul class=“navbar-nav”> 的一部分吗？比如<ul class=“navbar-nav mr-auto”>.

Answer 2

试试这个

#navbarNav{
      text-align: right;
    }

也代替这个

<div class="collapse navbar collapse"id="navbarNav"> use this 

<div class="collapse navbar-collapse justify-content-end" id="navbarNav">

我的导航栏没有随着 mr-auto 向右移动？

My navbar is not moving to the right with mr-auto?

html

css

bootstrap-4