Bootstrap 5: NAV 项没有右对齐

Question

如何将导航项移到右侧？

我正在使用 Bootstrap 5 并使用导航功能。默认情况下，项目在左侧对齐，但我想将它们放在右侧。我已经使用了 navbar-right float: right; 和 ml-auto 即使它在 Bootstrap 上 4. 这是导航栏在网站中的样子

这就是我的代码：

（注意：如果我不把它放在 <div class="collapse navbar-collapse" id="navbarSupportedContent"> 内，它只会向右移动，但我需要它们在那里。）

Answer 1

使用母div中的“flex-row-reverse”class。它会改变 mother div 的子项的位置。截图 - https://prnt.sc/uZi6oR9evyaJ

为桌面和移动设备使用导航标记

<nav class="navbar d-lg-flex navbar-expand-lg navbar-light bg-light align-items-center justify-content-between">
        <div class="d-flex w-100 align-items-center justify-content-between">
            <a class="navbar-brand" href="#">
                Site Logo
            </a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#myNavbar">
                <span class="navbar-toggler-icon"></span>
            </button>
        </div>

        <div class="collapse w-100 navbar-collapse flex-row-reverse" id="myNavbar">
            <ul class="navbar-nav">
                <li class="nav-item">
                    <a href="#" class="nav-link menu-item nav-active">Our Solution</a>
                </li>
                <li class="nav-item">
                    <a href="#" class="nav-link menu-item">How We Help</a>
                </li>
                <li class="nav-item">
                    <a href="#" class="nav-link menu-item">Blog</a>
                </li>
                <li class="nav-item">
                    <a href="#" class="nav-link menu-item">Contact</a>
                </li>
            </ul>
        </div>
    </nav>

Answer 2

我想你正在寻找这样的东西：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" />

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

  <title>Investigation Management and Alert Site</title>
</head>

<body>
  <nav class="navbar navbar-expand-lg navbar-light bg-light">
    <div class="container-fluid">
      <a class="navbar-brand" href="#">
          Investigation Management and Alert Site
        </a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
      <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav ms-auto mb-2 mb-lg-0">
          <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="#">Inspections</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">About Us</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">
              <i class="bi bi-person-fill"></i>
            </a>
          </li>
        </ul>
      </div>
    </div>
  </nav>

  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.bundle.min.js"></script>
</body>

</html>

以下是您应该记住的一些想法：

ml-auto class 用于 Bootstrap 4 和 navbar-right 用于 Bootstrap 3。 Bootstrap 5 class名称已更改，因此您应该为此使用 ms-auto（参见 Bootrap 5 Migration）
类不能在 HTML 中用逗号分隔。 Comma-separation for classes 仅适用于 CSS-selector.
我建议使用图标字体或使用单个 svg-icon 作为 user-icon。这样做的原因是 svg-icon 可以在没有像素化的情况下进行缩放，它们的尺寸要小得多，并且在 SEO 和可访问性方面通常是这个 use-case 更好的主意。
记得正确关闭所有标签（在您的代码中关闭 ul 标签两次）。
以后尽量post把你的代码写成表格，方便别人复制。对于图像，如果有人想帮助您，可能需要手动输入所有内容。

希望对您有所帮助。如果没有或者您有任何问题，请随时提问。坚持下去！

Bootstrap 5: NAV 项没有右对齐

Bootstrap 5: NAV items do not align to the right

html

css

alignment

twitter-bootstrap

bootstrap-4