如何让我的 boostrap 5 导航栏折叠并保持关闭状态？

Question

我的 Bootstrap 5 导航栏不会保持关闭状态。它立即弹回打开。

我正在构建的公司网站有这个导航栏，我一直在关注所有教程，并查看了大量有关该问题的堆栈溢出和堆栈交换论坛，并且我的导航栏在关闭后仍然立即重新打开。我的进口是正确的，我已经四重检查了。我剥离了它的所有样式以尝试让它工作，因此不需要包含 CSS，因为无论样式如何，问题都是一致的。我将 EJS 与 NodeJS 和 Express 结合使用。

<nav class="navbar navbar-dark bg-dark navbar-expand-lg">
    <a class="navbar-brand title" href="/"><img src="white_logo.png" style="max-width: 60px;"> NJC Studios</a>
    <button class="navbar-toggler collapsed" type="button" data-bs-toggle="collapse" data-bs-target=".navbar-collapse" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>

    <div class="container collapse navbar-collapse" id="navbarSupportedContent" style="margin-right: 30px;">
        <ul class="nav navbar-nav">
            <li class="nav-item">
                <% if (title == 'About') { %>
                <a class="nav-link" href="/about" style="background-color: rgb(134, 168, 181);">About</a>
                <% } else { %>
                <a class="nav-link" href="/about">About</a>
                <% } %>
            </li>
            <li class="nav-item">
                <% if (title == 'Services') { %>
                <a class="nav-link" href="/services" style="background-color: rgb(134, 168, 181);">Services</a>
                <% } else { %>
                <a class="nav-link" href="/services">Services</a>
                <% } %>
            </li>
            <li class="nav-item ">
                <% if (title == 'Learn') { %>
                <a class="nav-link" href="/learn" style="background-color: rgb(134, 168, 181);">Learn</a>
                <% } else { %>
                <a class="nav-link" href="/learn">Learn</a>
                <% } %>
            </li>
            <li class="nav-item">
                <% if (title == 'Portfolio') { %>
                <a class="nav-link" href="/portfolio" style="background-color: rgb(134, 168, 181);">Portfolio</a>
                <% } else { %>
                <a class="nav-link" href="/portfolio">Portfolio</a>
                <% } %>
            </li>
            <li class="nav-item ">
                <% if (title == 'Contact') { %>
                <a class="nav-link" href="/contact" style="background-color: rgb(134, 168, 181);">Contact</a>
                <% } else { %>
                <a class="nav-link" href="/contact">Contact</a>
                <% } %>
            </li>
        </ul>
    </div>
</nav>

Answer 1

恰好 container 类与 collapse 和 navbar-collapse 一起出现。如果您检查 docs，您将看到在他们提供的示例中，类 container-fluid 出现在包装所有导航栏内容的

div

内。添加

div

，它看起来像这样：

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-dark bg-dark navbar-expand-lg">
  <div class="container">
    <a class="navbar-brand title" href="/"><img src="white_logo.png" style="max-width: 60px;"> NJC Studios</a>
    <button class="navbar-toggler collapsed" type="button" data-bs-toggle="collapse" data-bs-target=".navbar-collapse" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="navbarSupportedContent" style="margin-right: 30px;">
      <ul class="nav navbar-nav">
        <li class="nav-item">
          <a class="nav-link" href="/about">About</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="/services">Services</a>
        </li>
        <li class="nav-item ">
          <a class="nav-link" href="/learn">Learn</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="/portfolio">Portfolio</a>
        </li>
        <li class="nav-item ">
          <a class="nav-link" href="/contact">Contact</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

并将 container 替换为 container-fluid，它看起来像这样：

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-dark bg-dark navbar-expand-lg">
  <div class="container-fluid">
    <a class="navbar-brand title" href="/"><img src="white_logo.png" style="max-width: 60px;"> NJC Studios</a>
    <button class="navbar-toggler collapsed" type="button" data-bs-toggle="collapse" data-bs-target=".navbar-collapse" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="navbarSupportedContent" style="margin-right: 30px;">
      <ul class="nav navbar-nav">
        <li class="nav-item">
          <a class="nav-link" href="/about">About</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="/services">Services</a>
        </li>
        <li class="nav-item ">
          <a class="nav-link" href="/learn">Learn</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="/portfolio">Portfolio</a>
        </li>
        <li class="nav-item ">
          <a class="nav-link" href="/contact">Contact</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

在“构建”导航栏（使用 HTML 和 CSS）时必须非常注意，因为动画能否正常工作取决于此。