我有如下导航栏菜单。左侧菜单的一个按钮,右侧菜单的一个按钮。当屏幕显示在小屏幕中时,菜单始终显示但不会折叠。
当我单击按钮时,它不会折叠菜单。
您能否提一些建议?

<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

10-05 21:01
查看更多