如何在 navbar-toggler 上将 navbar-items 对齐到右边

Question

我的导航栏在全屏上运行良好，切换器在小屏幕上运行良好。但是，当您单击切换器图标时，导航栏项目会出现在屏幕的左侧，而切换器图标会出现在右侧。我该如何解决这个问题，以便导航栏项目出现在导航栏图标下方和屏幕右侧？我使用 Bootstrap 5 作为参考。

<nav class="navbar navbar-expand-md">
  <a class="navbar-brand" href="/">
    <img class="navbar-logo" src="{% static 'site_base/images/image1.png' %}" alt="MagPie Logo">
  </a>
  <button
    class="navbar-toggler navbar-dark"
    type="button"
    data-bs-toggle="collapse"
    data-bs-target="#main-navigation"
  >
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="main-navigation">
    <ul class="navbar-nav ms-auto">
      <li class="nav-item">
        <a class="nav-link" href="#">About Us</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Products</a>
          <ul class="dropdown-menu">
            <li class="dropdown-item"><a href="/product1">Product 1</a></li>
          </ul>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Resources</a>
          <ul class="dropdown-menu">
            <li class="dropdown-item"><a href="#">User Guides</a></li>
            <li class="dropdown-item"><a href="#">Videos</a></li>
          </ul>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="/company">Company</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="/contact-us">Contact Us</a>
      </li>
    </ul>
  </div>
</nav>

Answer 1

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
      crossorigin="anonymous"
    />
  </head>
  <body>
    <nav class="navbar navbar-expand-md">
      <a class="navbar-brand" href="/">
        <img
          class="navbar-logo"
          src="{% static 'site_base/images/image1.png' %}"
          alt="MagPie Logo"
        />
      </a>
      <button
        class="navbar-toggler navbar-dark"
        style="background-color: red"
        type="button"
        data-bs-toggle="collapse"
        data-bs-target="#main-navigation"
      >
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse text-end" id="main-navigation">
        <ul class="navbar-nav ms-auto">
          <li class="nav-item">
            <a class="nav-link" href="#">About Us</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Products</a>
            <ul class="dropdown-menu">
              <li class="dropdown-item"><a href="/product1">Product 1</a></li>
            </ul>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Resources</a>
            <ul class="dropdown-menu">
              <li class="dropdown-item"><a href="#">User Guides</a></li>
              <li class="dropdown-item"><a href="#">Videos</a></li>
            </ul>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="/company">Company</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="/contact-us">Contact Us</a>
          </li>
        </ul>
      </div>
    </nav>

    <script
      src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
      integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
      crossorigin="anonymous"
    ></script>
  </body>
</html>

您可以在 navbar-collapse 或 ul 上添加 text-end class。

注意：在平板电脑上尝试移动尺寸，我在按钮上添加 background-color: red，使其可见。

如何在 navbar-toggler 上将 navbar-items 对齐到右边

How to align navbar-items to the right on navbar-toggler

bootstrap-5