(asp.net) Bootstrap 4 导航栏切换器不工作

Posted 2023-03-06

【中文标题】(asp.net) Bootstrap 4 导航栏切换器不工作

【英文标题】：(asp.net) Bootstrap 4 Navbar toggler not working

【发布时间】：2019-12-20 20:49:40

【问题描述】：

我在 asp.net（.net 框架）中使用 bootstrap 4。当我将网站视图从 pc 视图更改为移动视图时，navbar-toggler-icon 按钮正在工作。当我按下切换图标按钮时，导航栏内容未显示。 navbar-collapse id 与 data-target 相同，但仍然无法正常工作，请您帮帮我。 这是我的代码：

<nav id="navbar" class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
    <div class="container">
        <a class="navbar-brand" href="/index.aspx">
            <img class="logo" src="img/Logo/logo_Rueston.png" >
        </a>
        <button class="navbar-toggler" type="button" data-toggle="navbar-collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarCollapse">
            <ul class="navbar-nav navbar-center ml-auto">
                <li class="nav-item ml-3">
                    <a class="nav-link" href="/index.aspx">Home<span class="sr-only">(current)</span></a>
                </li>
                <li class="nav-item ml-3">
                    <a class="nav-link" href="#">About</a>
                </li>
                <li class="nav-item ml-3">
                    <a class="nav-link" href="#">Products</a>
                </li>
                <li class="nav-item ml-3">
                    <a class="nav-link" href="#">Rueston Water</a>
                </li>
            </ul>
            <ul class="navbar-nav ml-auto">

                <li class="nav-item ml-3">
                    <a class="nav-link" href="#">
                        <asp:Label ID="lbLogin" runat="server" Text="Login"></asp:Label>

                    </a>
                </li>
                <li class="nav-item ml-3">
                    <a class="nav-link" href="#">
                        <asp:Label ID="lbSignup" runat="server" Text="SignUp"></asp:Label>

                    </a>
                </li>
            </ul>
        </div>
    </div>
</nav>

这是演示图片：

before pressing the toggler button:

After pressing the toggler button

【参考方案1】：

将按钮中的data-toggle="navbar-collapse"更改为data-toggle="collapse"

<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
</button>

【讨论】：

从没有其他 css/html/js 的核心 boostrap 文件的空白页面开始，然后将您的代码粘贴到我的更改上，看看会发生什么。我的猜测是有其他东西在干扰。

我开始一个新项目，bootstrap.min.css 只是我用的，但它仍然没有显示。伤心

你还需要bootstrap js文件。