我已经通过nuget Manager更新了Visual Studio中的bootstrap和其他组件的版本，它也自动更新了捆绑包。现在我的导航栏没有按预期显示
我也手动更新了捆绑配置.cs部分。它仍然什么也没显示。请参考以下代码和图片
我正在使用Visual Studio 2013/visual studio 2017
捆绑.config
<?xml version="1.0" encoding="utf-8" ?>
<bundles version="1.0">
<styleBundle path="~/Content/css">
<include path="~/Content/bootstrap.css" />
<include path="~/Content/Site.css" />
</styleBundle>
</bundles>
BundleConfig.cs
public class BundleConfig
{
public static void RegisterBundles(BundleCollection bundles)
{
bundles.Add(new ScriptBundle("~/bundles/jquery")
.Include("~/Scripts/jquery-{version}.js")
.Include("~/Scripts/jquery-ui.min.js"));
bundles.Add(new ScriptBundle("~/bundles/WebFormsJs").Include(
"~/Scripts/WebForms/WebForms.js",
"~/Scripts/WebForms/WebUIValidation.js",
"~/Scripts/WebForms/MenuStandards.js",
"~/Scripts/WebForms/Focus.js",
"~/Scripts/WebForms/GridView.js",
"~/Scripts/WebForms/DetailsView.js",
"~/Scripts/WebForms/TreeView.js",
"~/Scripts/WebForms/WebParts.js"));
// Order is very important for these files to work, they have explicit dependencies
bundles.Add(new ScriptBundle("~/bundles/MsAjaxJs").Include(
"~/Scripts/WebForms/MsAjax/MicrosoftAjax.js",
"~/Scripts/WebForms/MsAjax/MicrosoftAjaxApplicationServices.js",
"~/Scripts/WebForms/MsAjax/MicrosoftAjaxTimer.js",
"~/Scripts/WebForms/MsAjax/MicrosoftAjaxWebForms.js"));
bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
"~/Scripts/modernizr-*"));
bundles.Add(new ScriptBundle("~/bundles/popper").Include(
"~/Scripts/popper.js"));
ScriptManager.ScriptResourceMapping.AddDefinition(
"respond",
new ScriptResourceDefinition
{
Path = "~/Scripts/respond.min.js",
DebugPath = "~/Scripts/respond.js",
});
}
}
}
_reference.js
/// <reference path="modernizr-2.8.3.js" />
/// <reference path="jquery-3.3.1.js" />
/// <autosync enabled="true" />
/// <reference path="bootstrap.js" />
/// <reference path="respond.js" />
/// <reference path="popper.js" />
网站.主
[<head runat="server">
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<asp:PlaceHolder runat="server">
<%: Scripts.Render("~/bundles/modernizr") %>
<%: Scripts.Render("~/bundles/jquery") %>
<%: Scripts.Render("~/bundles/jqueryui") %>
<%: Scripts.Render("~/bundles/popper") %>
</asp:PlaceHolder>
<webopt:bundlereference runat="server" path="~/Content/css" />
<link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
</head>
<body>
<form runat="server">
<asp:ScriptManager runat="server">
<Scripts>
<%--Framework Scripts--%>
<asp:ScriptReference Name="MsAjaxBundle" />
<%--<asp:ScriptReference Name="jquery" />--%>
<%-- <asp:ScriptReference Name="bootstrap" />--%>
<asp:ScriptReference Name="respond" />
<asp:ScriptReference Name="WebForms.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebForms.js" />
<asp:ScriptReference Name="WebUIValidation.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebUIValidation.js" />
<asp:ScriptReference Name="MenuStandards.js" Assembly="System.Web" Path="~/Scripts/WebForms/MenuStandards.js" />
<asp:ScriptReference Name="GridView.js" Assembly="System.Web" Path="~/Scripts/WebForms/GridView.js" />
<asp:ScriptReference Name="DetailsView.js" Assembly="System.Web" Path="~/Scripts/WebForms/DetailsView.js" />
<asp:ScriptReference Name="TreeView.js" Assembly="System.Web" Path="~/Scripts/WebForms/TreeView.js" />
<asp:ScriptReference Name="WebParts.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebParts.js" />
<asp:ScriptReference Name="Focus.js" Assembly="System.Web" Path="~/Scripts/WebForms/Focus.js" />
<asp:ScriptReference Name="WebFormsBundle" />
<%--Site Scripts--%>
</Scripts>
</asp:ScriptManager>][1]
带有下拉列表的预期导航栏
我的代码输出
导航栏的 HTML 标记
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" runat="server" href="~/Default"><span class="glyphicon glyphicon-home"></span></a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav m-auto">
<li class="nav-item dropdown ">
<a id="menuTips" runat="server" class="nav-link dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Tips</a>
<div class="dropdown-menu dropdown-default" aria-labelledby="menuTips">
<a id="A1" class="dropdown-item " runat="server" href="~/">option1</a>
<a id="A2" class="dropdown-item " runat="server" href="~/">option2</a>
<a id="A3" class="dropdown-item " runat="server" href="~/">option3</a>
<a id="A4" class="dropdown-item " runat="server" href="~/">option4</a>
</div>
</li>
<li><a runat="server" href="~/Default">Inventory</a></li>
<li class="nav-item dropdown ">
<a id="menuHoliday" runat="server" class="nav-link dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Holiday</a>
<div class="dropdown-menu dropdown-primary myMenu " aria-labelledby="menuHoliday">
<a id="A6" class="dropdown-item myDropDownItem" runat="server" href="~/">option1</a>
<a id="A7" class="dropdown-item myDropDownItem" runat="server" href="~/">option2</a>
</div>
</li>
<li><a runat="server" href="~/">Reports</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a runat="server" href="~/">Follow</a></li>
<li><a runat="server" href="~/"><span class="glyphicon glyphicon-search"></span></a></li>
</ul>
</div>
</div>
</div>
问题出在导航栏的 html 代码上。我正在使用引导程序3.3.7版本的代码。但它似乎与引导程序 4 完全不同。
从这里找到了解决方案：https://getbootstrap.com/docs/4.0/components/navbar/
现在它工作正常。