汉堡菜单未显示在移动设备上
[英]Hamburger Menu not showing on mobile devices
问题描述
I am using bootstrap 3.4.x, and for some reason my Menu is not visible on mobile devices.
我使用的是 bootstrap 3.4.x，由于某种原因，我的菜单在移动设备上不可见。 I am able to resize in browser and all is good, but viewing on a device nothing.我能够在浏览器中调整大小，一切都很好，但在设备上查看什么都没有。 View port is set in head tag, jquery is being loaded before bootstrap.视图端口在 head 标签中设置，jquery 在引导之前被加载。 I can't for the life of me find the issue.我一辈子都找不到问题所在。 ??? ？？？ Below is the desired result (site: site in question )以下是所需的结果（站点：相关站点）
here is what mobile looks like:这是手机的样子：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
</head>
<body>
<form runat="server">
<asp:ScriptManager runat="server">
<Scripts>
<%--To learn more about bundling scripts in ScriptManager see https://go.microsoft.com/fwlink/?LinkID=301884 --%>
<%--Framework Scripts--%>
<asp:ScriptReference Name="MsAjaxBundle" />
<asp:ScriptReference Name="jquery" />
<asp:ScriptReference Name="bootstrap" />
<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>
<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="#ham-menu">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" runat="server" href="~/">LOGO Here</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav" id="ham-menu">
<li><a runat="server" href="~/">Home</a></li>
<li><a runat="server" href="~/Schedule">Schedule</a></li>
<li><a runat="server" href="~/Gallery">Gallery</a></li>
<li><a runat="server" href="~/About">About</a></li>
<li><a runat="server" href="~/Contact">Contact</a></li>
</ul>
<asp:LoginView runat="server" ViewStateMode="Disabled">
<AnonymousTemplate>
<ul class="nav navbar-nav navbar-right">
<li><a runat="server" href="~/Account/Register">Register</a></li>
<li><a runat="server" href="~/Account/Login">Log in</a></li>
</ul>
</AnonymousTemplate>
<LoggedInTemplate>
<ul class="nav navbar-nav navbar-right">
<li>
<a runat="server" href="~/Account/Manage" title="Manage your account">Hello, <%: Context.User.Identity.GetUserName() %>!</a>
</li>
<li>
<asp:LoginStatus runat="server" LogoutAction="Redirect" LogoutText="Log off" LogoutPageUrl="~/" OnLoggingOut="Unnamed_LoggingOut" />
</li>
</ul>
</LoggedInTemplate>
</asp:LoginView>
</div>
</div>
</div>
</body>
</html>
2 个解决方案
解决方案1
2 2020-09-16 02:43:26
Update : I checked the site link you have given in question.更新：我检查了您提供的站点链接。 It seems everything is rendering fine.似乎一切都很好。 Now you just need to move the id="ham-menu" attribute.现在您只需要移动id="ham-menu"属性。
So, I copy pasted your code on a page where bootstrap 3.4.x was initialized properly.因此，我将您的代码复制粘贴到引导程序 3.4.x 已正确初始化的页面上。 Turns out your HTML Code is fine with only one problem:结果你的 HTML 代码没问题，只有一个问题：
Move the id attribute from <ul> to the outer <div> .将 id 属性从<ul>到外部<div> 。
<div class="navbar-collapse collapse" id="ham-menu"><!--To Here-->
<ul class="nav navbar-nav"><!--From Here-->
<li><a runat="server" href="~/">Home</a></li>
<li><a runat="server" href="~/Schedule">Schedule</a></li>
<li><a runat="server" href="~/Gallery">Gallery</a></li>
<li><a runat="server" href="~/About">About</a></li>
<li><a runat="server" href="~/Contact">Contact</a></li>
</ul>
</div>
Now, make sure you have properly initialized bootstrap.现在，确保您已正确初始化引导程序。 Key points:关键点：
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
解决方案2
0 已采纳 2020-10-21 03:24:43
I found this article that worked.我发现这篇文章有效。 make sure to take note on Olorunfemi Ajibulu comment at the bottom.请务必注意底部的 Olorunfemi Ajibulu 评论。 regrading remove additional files at destination!!重新升级在目的地删除其他文件！！
Disable aspnet.friendlyurl's mobile redirect for tablets 为平板电脑禁用 aspnet.friendlyurl 的移动重定向
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.