如何将此导航栏菜单移动到右侧？答案

【问题标题】：How can i move this navbar menu to the right side?如何将此导航栏菜单移动到右侧？
【发布时间】：2021-11-14 03:05:04
【问题描述】：

如何将此导航栏菜单移到右侧？

我无法在右侧移动此导航栏菜单。我试过浮动正确的方法。什么是最好的解决方案？

我尝试了很多方法都没有结果，你能帮忙解决我的问题吗！

这是我的代码

    <html>

    <head>

        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" rel="stylesheet"
            integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">

        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css">

        <title>TechSite</title>

        <style>
            .navbar-brand{
                font-size: 2rem;
            }
            ul.navbar-nav {
               font-size: 1.15rem;
            }
            .nav-link {
                padding: .3rem 1rem;
                color: white;
            }

            .nav-link:hover {
                color: white;
            }

            button.navbar-toggler {
                color: white;
            }

            p {
                color: gray;
            }
        </style>

    </head>

    <body>

        <!-- navbar -->

        <nav class="navbar navbar-expand-lg  bg-dark fixed-top">

            <div class="container-fluid">

                <a class="navbar-brand" href="#" style="color: red;">
                    TechSite
                </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" style="color: white;"></span>
                </button>

                <div class="collapse navbar-collapse" id="navbarNav">
                    <ul class="navbar-nav float-end">
                        <li class="nav-item">
                            <a class="nav-link active rounded" aria-current="page" href="#"
                                style="color: rgb(173, 173, 173);border: 1px solid wheat;">
                                Home
                            </a>
                        </li>
                        <li class="nav-item dropdown">
                            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button"
                                data-bs-toggle="dropdown" aria-expanded="false">
                                Services
                            </a>
                            <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
                                <li><a class="dropdown-item" href="#">App Development</a></li>
                                <li><a class="dropdown-item" href="#">Game Development</a></li>
                                <li><a class="dropdown-item" href="#">Web Development</a></li>
                            </ul>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#" style="color: white;">About</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#" style="color: white;">Contact</a>
                        </li>
                    </ul>
                </div>

            </div>

        </nav>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ"
        crossorigin="anonymous"></script>

    </body>

    </html>

使用 Bootstrap 5 解决问题是不是更好？

【问题讨论】：

标签： javascript html css twitter-bootstrap

【解决方案1】：

在 flex 系统中，您将容器 navbar-collapse 指定为 justify-content-center 类，您的选项菜单将与右侧对齐。

更新您的 HTML 代码

<nav class="navbar navbar-expand-lg  bg-dark fixed-top">

  <div class="container-fluid">

      <a class="navbar-brand" href="#" style="color: red;">
          TechSite
      </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" style="color: white;"></span>
      </button>

      <div class="collapse navbar-collapse justify-content-center" id="navbarNav">
          <ul class="navbar-nav float-end">
            <li class="nav-item">
              <a class="nav-link active rounded" aria-current="page" href="#"
                  style="color: rgb(173, 173, 173);border: 1px solid wheat;">
                  Home
              </a>
          </li>
              <li class="nav-item dropdown">
                  <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button"
                      data-bs-toggle="dropdown" aria-expanded="false">
                      Services
                  </a>
                  <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
                      <li><a class="dropdown-item" href="#">App Development</a></li>
                      <li><a class="dropdown-item" href="#">Game Development</a></li>
                      <li><a class="dropdown-item" href="#">Web Development</a></li>
                  </ul>
              </li>
              <li class="nav-item">
                  <a class="nav-link" href="#" style="color: white;">About</a>
              </li>
              <li class="nav-item">
                  <a class="nav-link" href="#" style="color: white;">Contact</a>
              </li>
              
          </ul>
      </div>

  </div>

</nav>

【讨论】：