我有如下导航栏菜单。左侧菜单的一个按钮,右侧菜单的一个按钮。当屏幕显示在小屏幕中时,菜单始终显示但不会折叠。
当我单击按钮时,它不会折叠菜单。
您能否提一些建议?
<div class="container">
<div class="navbar navbar-light navbar-expand-lg logo-background container shadow">
<button class="sidebar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">>
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand navbar-brand-custom"><img src="Content/Jeo/images/logo.svg" alt="" class="logo-shape"/></a>
<div class="navbar-text navbar-text-custom">
<div class="application-name"><%=GetResource("Jeo")%></div>
<div class="application-name" style="margin-top: 4px"><%=GetResource("Management")%></div>
</div>
<div class="navbar-collapse collapse" id="navbarSupportedContent">
<div class="navbar__menu">
<ul class="navbar-nav">
<li class="nav-item navbar__menu-item active">
<a class="nav-link text-white" href="Default"><%=GetResource("JView")%></a>
</li>
<li class="nav-item navbar__menu-item">
<a class="nav-link text-white" href="TechView"><%=GetResource("TView")%></a>
</li>
</ul>
</div>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-collapse">
<span class="ua-icon-navbar-open navbar-toggler__open"></span>
<span class="ua-icon-alert-close navbar-toggler__close"></span>
</button>
<div class="dropdown navbar-dropdown" id="navbar-collapse">
<a class="dropdown-toggle navbar-dropdown-toggle navbar-dropdown-toggle__user caret-off" data-toggle="dropdown" href="#">
<asp:Image ID="ImgAvatar" runat="server" class="rounded-circle img-hover" Height="30px" Width="30px" />
</a>
<div class="dropdown-menu navbar-dropdown-menu navbar-dropdown-menu__user">
<asp:LinkButton ID="btnLanguageFrench" runat="server" class="dropdown-item" OnClick="btnLanguageFrench_Click"><%=GetResource("French")%><i class="fas fa-globe fa-pull-right dropdown-item-padding-top"></i></asp:LinkButton>
<asp:LinkButton ID="btnLanguageEnglish" runat="server" class="dropdown-item" OnClick="btnLanguageEnglish_Click"><%=GetResource("English")%><i class="fas fa-globe fa-pull-right dropdown-item-padding-top"></i></asp:LinkButton>
</div>
</div>
</div>
</div>
<div class="body-content">
<asp:ContentPlaceHolder ID="MainContent" runat="server">
</asp:ContentPlaceHolder>
</div>
</div>
谢谢
最佳答案
您可以仅使用CSS来做到这一点,而媒体查询仅适用于小屏幕
@media (max-width: 680px) {
.navbar .dropdown-menu.yourclass {
display: block!important;
}
}
Jus将您的班级添加到您希望始终保持正常运行的下拉菜单中。
有关更多示例,请检查http://bootstrap-menu.com