如果我调整 windows 的大小，为什么导航菜单中的 togle 按钮不起作用？

Question

我有这样的导航，它会响应，但如果我调整 windows 工具按钮的大小，但它不起作用。

  <!-- Navbar -->
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
        <!-- Container wrapper -->
        <div class="container">
            <!-- Navbar brand -->
            <a class="navbar-brand me-2" asp-controller="Main" asp-action="MaIndex">
                <i class="far fa-grin-beam-sweat"></i> Welcome
            </a>

            <!-- Toggle button -->
            <button class="navbar-toggler"
                    type="button"
                    data-mdb-toggle="collapse"
                    data-mdb-target="#navbarButtonsExample"
                    aria-controls="navbarButtonsExample"
                    aria-expanded="false"
                    aria-label="Toggle navigation">
                <i class="fas fa-bars"></i>
            </button>

            <!-- Collapsible wrapper -->
            <div class="collapse navbar-collapse" id="navbarButtonsExample">
                <!-- Left links -->
                <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                    <li class="nav-item">
                        <a class="nav-link" asp-controller="Language" asp-action="LaIndex">Learning HUB</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Upload files</a>
                    </li>
                </ul>
                <!-- Left links -->

                <div class="d-flex align-items-center">
                    <form method="post" asp-action="logout" asp-controller="account">
                        <button type="submit" class="nav-link btn btn-link py-0" style="width:auto">
                            @User.Identity.Name
                        </button>
                    </form>
                </div>
                <!-- Collapsible wrapper -->
            </div>
            <!-- Container wrapper -->
        </div>
    </nav>
    <!-- Navbar -->

JS Fiddler 附https://jsfiddle.net/mygus/z9o4wk7u/3/

我究竟做错了什么？

谢谢你，M。

Answer 1

这对我有用。

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
        <!-- Container wrapper -->
        <div class="container-fluid">
            <!-- Navbar brand -->
            <a class="navbar-brand me-2" asp-controller="Main" asp-action="MaIndex">
                <i class="far fa-grin-beam-sweat"></i> Welcome
            </a>

            <!-- Toggle button -->
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
                <i class="fas fa-bars"></i>
            </button>

            <!-- Collapsible wrapper -->
            <div class="collapse navbar-collapse" id="navbarTogglerDemo01">
                <!-- Left links -->
                <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                    <li class="nav-item">
                        <a class="nav-link" asp-controller="Language" asp-action="LaIndex">Learning HUB</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Upload files</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" asp-controller="Administration" asp-action="ListRoles">List roles</a>
                    </li>
                </ul>
                <!-- Left links -->

                <div class="d-flex align-items-center">
                    <form method="post" asp-action="logout" asp-controller="account">
                        <button type="submit" class="nav-link btn btn-link py-0" style="width:auto">
                            @User.Identity.Name
                        </button>
                    </form>
                </div>
                <!-- Collapsible wrapper -->
            </div>
            <!-- Container wrapper -->
        </div>
    </nav>