我的导航栏没有使用 mr-auto 向右移动？答案

【问题标题】：My navbar is not moving to the right with mr-auto?我的导航栏没有使用 mr-auto 向右移动？
【发布时间】：2022-01-29 15:24:21
【问题描述】：

我使用 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>

【问题讨论】：

你的#navbar 元素应该有'fixed' 或'absolute' 的位置和right = 0 贴在右边，在开始使用Bootstrap 之前尝试了解CSS 位置。以下视频可以帮助您 => youtube.com/watch?v=jx5jmI0UlXU

标签： html css bootstrap-4

【解决方案1】：

试试这个

#navbarNav{
      text-align: right;
    }

也不是这个

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

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

【讨论】：

【解决方案2】：

您的mr-auto 不应该成为<ul class=“navbar-nav” 的一部分吗？如<ul class=“navbar-nav mr-auto”>。

【讨论】：