Question

显然，我的navbar汉堡包按钮不起作用。我一直在尝试解决问题，但到目前为止还算不上运气。我希望你们能为我的学校项目提供帮助。此外，导航栏中的下拉列表选项也不起作用。这是我的导航栏代码：

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="MentorMenu.ascx.cs" Inherits="web_assignment_P05_group2.MentorMenu" %>
<!-- Navbar that expands horizontally at medium device -->
<nav class ="navbar navbar-expand-md bg-dark navbar-dark">
    <!-- Icon/Brand of navbar -->
    <a class="navbar-brand" href="MentorMain.aspx" style="font-size:32px; font-weight:bold; color:#3399FF;">
        ABC e-Portfolios
    </a>
    <!-- Toggle/collapsible button a.k.a hamburger button -->
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#mentorNavbar">
        <span class="navbar-toggler-icon"></span>
    </button>
    <!-- Links in the navbar,displayed as drop-down list when collapsed -->
    <div class="collapse navbar-collapse" id="mentorNavbar">
        <!--Links that are aligned to the left. mr-auto:right margin auto-adjusted -->
        <ul class="navbar-nav mr-auto">
            <li class="nav-item">
                <a class="nav-link" href="ApproveStudentPortfolio.aspx">Approve or Make Suggestion</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="MentorBoard.aspx">e-Message Board</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="MentorSearchStudent.aspx">Search Student</a>
            </li>
            <!-- Settings option (droopdown)-->
            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown">Settings</a>
                <div class="dropdown-menu">
                    <a class ="dropdown-item" href="MentorPasswordChange.aspx">Change Password</a>
                </div>
            </li>
        </ul>
        <ul class="navbar-nav ml-auto">
            <li class="nav-item">
                <!-- A web form control button for loggin out user -->
                <asp:Button ID="btnLogOut" runat="server" Text="Log Out" CssClass="btn btn-link nav-link" />
            </li>
        </ul>
    </div>

</nav>

这是我使用导航栏的主模板，该导航栏显然不起作用。

<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="MentorTemplate.Master.cs" Inherits="web_assignment_P05_group2.MentorTemplate1" %>

<%@ Register Src="~/MentorMenu.ascx" TagPrefix="uc1" TagName="MentorMenu" %>



<!DOCTYPE html>

<html>
<head runat="server">
    <title>ABC Portfolio | NP Mentor</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <link href="Content/bootstrap.min.css" rel="stylesheet" />
    <script src="Scripts/jquery-3.0.0.min.js"></script>
    <script src="Scripts/umd/popper.min.js"></script>
    <script src="Scripts/bootstrap.min.js"></script>

    <asp:ContentPlaceHolder ID="head" runat="server">
    </asp:ContentPlaceHolder>
    <style type="text/css">
        .auto-style1 {
            position: relative;
            width: 100%;
            min-height: 1px;
            -ms-flex: 0 0 100%;
            flex: 0 0 100%;
            max-width: 100%;
            font-family: "Segoe UI";
            font-weight: bold;
            color: #0000FF;
            padding-left: 15px;
            padding-right: 15px;
        }
        .auto-style2 {
            font-size: large;
        }
        .auto-style3 {
            font-size: large;
            font-style: italic;
            color: #FF0000;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">

         <div class="container" style="margin:auto;">
             <!-- 1st row -->
            <div class="row">
                <div class="col-sm-12">
                    <uc1:MentorMenu runat="server" ID="MentorMenu" />
                </div>
            </div>
            <!-- 2nd row -->
            <div class="row">
                <div class="auto-style1"> 
                    <span class="auto-style2">Welcome, </span> <asp:Label ID="lblLoginID" runat="server" Text="" CssClass="auto-style3"></asp:Label>
                    <span class="auto-style2">&nbsp;you have been logged in since </span>
                    <asp:Label ID="lblLoggedTime" runat="server" CssClass="auto-style3"></asp:Label>
                </div>
            </div>
            <!-- 3rd row -->
            <div class="row">
                <div class="col-sm-12">
                    <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
                    </asp:ContentPlaceHolder>
                </div>
            </div>
            <div class="row">
                <div class="col-sm-12">
                    <asp:Label ID="lblCurrentUsers" runat="server" Text=""></asp:Label>            
                </div>
            </div>

        </div>
    </form>
</body>
</html>

我一直在尝试修复它，但是没有运气，希望你们能在这方面帮助我。

Bootstrap导航栏汉堡按钮不起作用

0 个答案: