0
对Bootstrap感到兴奋我正在替换我们网站的MasterPage中的菜单。我有一个很好的菜单可以在test.aspx页面中工作，但是当把它放在主页面中时，我发现小屏幕的汉堡图标不会显示下拉菜单。这是Bootstrap到Asp.Net组合的主要限制，还是我在这里做错了什么？如何让Bootstrap下拉菜单在ASP主页上工作
这里是与引导菜单的只是一个基本版本的母版：
<%@ Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage1.master.cs" Inherits="MasterPage1" %>
<!DOCTYPE html>
<html lang="nl">
<head>
<title>Test with Bootstrap menu</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<asp:ContentPlaceHolder ID="ContentPlaceHolder_Header" runat="server">
</asp:ContentPlaceHolder>
</head>
<body>
<form id="form1" runat="server">
<div class="container-fluid">
<nav id="menu_projects">
<div class="navbar navbar-default">
<div id="menubar" class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed"
data-toggle="collapse" data-target="#navbar"
aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div id="navbar" class="navbar-collapse collapse" runat="server">
<ul id="ul_menu" class="nav navbar-nav navbar-right" runat="server">
<li><a id="a_menu_1" href="#"></a>Menu 1</li>
<li><a id="a_menu_2" href="#"></a>Menu 2</li>
<li><a id="a_menu_3" href="#"></a>Menu 3</li>
<li><a id="a_menu_4" href="#"></a>Menu 4</li>
<li><a id="a_menu_5" href="#"></a>Menu 5</li>
<li><a id="a_menu_6" href="#"></a>Menu 6</li>
</ul>
</div>
</div>
</div>
</nav>
</div>
<asp:ContentPlaceHolder ID="ContentPlaceHolder_Body" runat="server">
</asp:ContentPlaceHolder>
</form>
</body>
</html>
这里使用主页的实际页：
<%@ Page Title="" Language="C#" MasterPageFile="~/Dev/MasterPage1.master" AutoEventWireup="true" CodeFile="MP1_menu_test.aspx.cs" Inherits="Dev_MP1_menu_test" %>
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder_Header" Runat="Server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder_Body" Runat="Server">
<h1>This is a test with master age</h1>
</asp:Content>
以上的组合仍然显示菜单，但只在一个大屏幕上。当缩小屏幕时，汉堡包图标取代菜单项目，但汉堡包不显示菜单项目的下拉列表。
我也与常规的，非母版相同的引导菜单的代码，aspx页面，这只是工作完美，有工作下拉测试：
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="NoMP_menu_test.aspx.cs" Inherits="Dev_NoMP_menu_test" %>
<!DOCTYPE html>
<html lang="nl">
<head>
<title>Test with Bootstrap menu</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<form id="form1" runat="server">
<div class="container-fluid">
<nav id="menu_projects">
<div class="navbar navbar-default">
<div id="menubar" class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed"
data-toggle="collapse" data-target="#navbar"
aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div id="navbar" class="navbar-collapse collapse" runat="server">
<ul id="ul_menu" class="nav navbar-nav navbar-right" runat="server">
<li><a id="a_menu_1" href="#"></a>Menu 1</li>
<li><a id="a_menu_2" href="#"></a>Menu 2</li>
<li><a id="a_menu_3" href="#"></a>Menu 3</li>
<li><a id="a_menu_4" href="#"></a>Menu 4</li>
<li><a id="a_menu_5" href="#"></a>Menu 5</li>
<li><a id="a_menu_6" href="#"></a>Menu 6</li>
</ul>
</div>
</div>
</div>
</nav>
</div>
<h1>Test without masterpage</h1>
</form>
</body>
</html>
用所有文件，我离开了代码 - 在完全空白的页面后面，只剩下那些由VisualStudio创建的页面。
.Net的版本是3.5。
基于此测试，看起来MasterPage破坏了Bootstrap。但是我发现很难相信像Bootstrap这样有用的软件包不能用于Asp Masterpage。
我还有什么代码菜单栏的网站有几十页？
批评家杰森是正确的：在母版ID值由ASP系统的东西，如ctl100_，这无疑是在引导的JavaScript无法找到这些原因前缀。
下面是相关部分由浏览器所看到：
<div class="navbar navbar-default">
<div id="menubar" class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed"
data-toggle="collapse" data-target="#navbar"
aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div id="ctl00_navbar" class="navbar-collapse collapse">
<ul id="ctl00_ul_menu" class="nav navbar-nav navbar-right">
<li><a id="a_menu_1" href="#"></a>Menu 1</li>
<li><a id="a_menu_2" href="#"></a>Menu 2</li>
<li><a id="a_menu_3" href="#"></a>Menu 3</li>
<li><a id="a_menu_4" href="#"></a>Menu 4</li>
<li><a id="a_menu_5" href="#"></a>Menu 5</li>
<li><a id="a_menu_6" href="#"></a>Menu 6</li>
</ul>
</div>
</div>
</div>
两个ID由IIS/ASP修饰以ctl100_navbar和ctl100_ul_menu。
我试图将数据目标更改为#ctl100_navbar但这没有帮助。
如何解决此问题？
打开浏览器的JavaScript控制台，然后再次尝试单击汉堡菜单。观察控制台以查看是否有任何javascript错误。这是我使用ASPX的年龄，但我相信ID或HTML元素的名称会动态更改，所以JavaScript无法找到它们。 –
@JasonRoner试过了，没有错误。我将尝试比较firefox中两个aspx页面的源代码以更改ID名称 – Roland
尝试将任何js脚本从
移动到之前以及 –