html - Bootstrap 导航栏确实切换

Question

我有如下所示的导航栏菜单。一个按钮用于左侧的菜单，一个按钮用于右侧的下拉菜单。当屏幕显示为小屏幕时，菜单始终显示但不折叠。当我单击按钮时，它不会折叠菜单。你能给点建议吗？

<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>

谢谢

Answer 1

你可以只用 CSS 来做到这一点，媒体查询只适用于小屏幕

@media (max-width: 680px) {
   .navbar  .dropdown-menu.yourclass {
    display: block!important;
  }
}

只需将您的类(class)添加到您希望始终保留的下拉菜单中。有关更多示例，请查看 http://bootstrap-menu.com