Bootstrap 导航栏会切换答案

【问题标题】：Bootstrap navbar does toggleBootstrap 导航栏会切换
【发布时间】：2020-04-07 00:45:57
【问题描述】：

我有如下导航栏菜单。左侧菜单一个按钮，右侧下拉菜单一个按钮。当屏幕以小屏幕显示时，菜单始终显示但不折叠。当我单击按钮时，它不会折叠菜单。可以请教吗？

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

谢谢

【问题讨论】：

请将您的代码放在 www.codepen.com 上，以便我可以试一试并修复它 :)

标签： html css twitter-bootstrap

【解决方案1】：

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

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

只需将您的班级添加到您希望始终保持 opan 的下拉菜单中。更多示例请查看http://bootstrap-menu.com

【讨论】：