IOS(Safari)的Bootstrap hamburgermenu(崩溃)可见性问题
问题描述:
我有一个使用bootstrap的响应webapp。当移动大小的汉堡菜单显示在标题中时。IOS(Safari)的Bootstrap hamburgermenu(崩溃)可见性问题
当点击一个pc/mac/android手机时,它显示正确..但是,当用iOS-Safari点击时,它显示了四分之一秒,并且再次隐藏。我怀疑这是一个高度或Z指数的问题,但我不知道,我一直无法解决它。
你可以试试www.gjovikhk.no。
不管怎么说..这里是标题和菜单的HTML代码:
<div id="menu" class="navbar navbar-default">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div id="logo" class="logo-placeholder">
<a href='Default.aspx'>
<img runat="server" id="imgClubLogo" src="" /></a>
</div>
</div>
<div class="navbar-collapse collapse" style="z-index:9999999999">
<ul class="nav navbar-nav navbar-left menu-row" style="margin-top: 5px;">
<li class="nav">
<asp:LinkButton runat="server" ID="lnkLoginMobile" Text="Login" href="/Login" />
</li>
<li class="nav">
<asp:LinkButton runat="server" href="/ViewAboutUs" ID="lnkAboutUsMobile" Text="Om GHK" />
</li>
<li class="nav">
<a href="#" runat="server" id="lnkPersonalMobile" style="display: none"><i style="padding-right: 5px" class="glyphicon glyphicon-star-empty"></i>Mitt lag</a>
</li>
<li class="nav">
<a href="Forum.aspx?type=1" runat="server" id="lnkCoachForumMobile" style="display: none"><i style="padding-right: 5px" class="glyphicon glyphicon-star-empty gly-spin"></i> Trenerforum</a>
</li>
<li class="nav">
<div style="float: left; color: lightyellow; width: 18px; padding-top: 16px" class="glyphicon glyphicon-star-empty" runat="server" id="starPersonalMobile" clientidmode="Static" visible="False"> </div>
<div style="float: left">
<div class="dropdown" runat="server" id="ddlPersonalMobile" clientidmode="Static" visible="False" style="display: inline-block">
<a class="dropdown-toggle" id="menu3mobile" data-toggle="dropdown" style="color:darkgreen!important">
Mine lag
</a>
<ul class="nav navbar-nav dropdown-menu" role="menu" aria-labelledby="menu1">
<asp:ListView runat="server" ID="lvCoachesTeamsMobile" ItemType="Servicelayer.Team" OnItemCommand="lvTeams_OnItemCommand">
<ItemTemplate>
<li role="presentation">
<asp:LinkButton runat="server" ID="lnkNavDep" style="color:darkgreen!important" Text='<%# Item.Name %>' CommandArgument='<%# Item.Id %>' CommandName="NavigateToTeam" />
</li>
</ItemTemplate>
</asp:ListView>
</ul>
</div>
</div>
</li>
<li class="nav">
<asp:LinkButton runat="server" href="/TeamOverview" ID="lnkTeamOverview" Text="Lag" />
</li>
<li class="nav">
<asp:LinkButton Visible="False" runat="server" href="/AdminPage" ID="lnkAdminPage" Text="Admin" />
</li>
<li class="nav" style="display: none">
<asp:LinkButton Visible="False" runat="server" href="/EventCalendar" ID="lnkTeamOverviewMobile" Text="Eventkalender" />
</li>
<li class="nav">
<asp:LinkButton runat="server" ID="lnkLogoutMobile" Text="Logg ut" OnClick="lnkLogoutMobile_OnClick" Visible="False" />
</li>
</ul>
</div>
<div class="navbar-icon-topright">
<div style="float: right; margin-top: -8px; margin-right: 10px">
<button id="contacttrigger" type="button" class="btn btn-warning btn-circle btn-lg contact-trigger"><i class="glyphicon glyphicon-earphone"></i></button>
<%--<img id="contacttrigger" src="Content/Images/icon-contact.png">--%>
<asp:LoginView runat="server" ViewStateMode="Disabled" ID="loginView">
<LoggedInTemplate>
<ul class="nav navbar-nav navbar-right">
<li><a runat="server" href="~/UserConfig.aspx" title="Manage your account">
<div style="float: left">
<div class="avatar-container" style="height: 30px; width: 30px; margin-top: -5px">
<img class="avatar" runat="server" id="loginAvatar" src="" style="height: 30px; width: 30px" />
</div>
</div>
<div style="float: left; padding-left: 10px; color: #333">
Hei <%: Context.User.Identity.GetUserName() %> <span class="btn btn-success btn-xs glyphicon glyphicon-user"></span>
</div>
</a></li>
</ul>
</LoggedInTemplate>
</asp:LoginView>
</div>
</div>
</div>
答
试试这个,有相应的媒体查询和/或额外的选择只会影响响应和/或仅适用于iPhone,那样精确,您需要:
.collapse.in {
overflow: hidden;
}
请阅读(// meta.*.com/q/326569)在什么情况下我想补充“紧急”或其他类似的短语我的问题,为了获得更快的答案?] - 总结是这不是解决志愿者问题的理想方式,而且可能适得其反克答案。请不要将这添加到您的问题。 – halfer