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腳本從
移動到之前以及 –