Twitter Bootstrap - 下拉菜单未显示在移动设备上

Question

谁能帮我弄清楚为什么我的菜单没有显示在我的移动设备上。可折叠菜单在浏览器中显示正常，但在移动设备（或窄浏览器 window）上，当您单击应显示链接的 3 个栏时，没有显示任何链接。

我使用的是 jhipster，所以我的代码被分成多个文件。除了应该出现在移动设备上的菜单选项外，所有菜单都运行良好。

非常感谢任何帮助

我的header.html如下

    <header class="clearfix">
    <a href="#/" data-toggle-min-nav class="toggle-min"><i class="fa fa-bars"></i></a>

    <!-- Logo -->
    <div class="logo">
        <a href="#/">
            <span translate="global.title">Cloud Ranger</span>
        </a>
    </div>
   <div class="menu-button" toggle-off-canvas data-target="#bs-example-navbar-collapse-1">

    <span class="sr-only">Toggle</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
    </div>

     <div class="top-nav">

        <ul class="nav-right pull-right list-unstyled">
            <li class="dropdown langs text-normal" ng-controller="LanguageController">
                <a href="javascript:;" class="dropdown-toggle" data-toggle="dropdown"><span translate="global.menu.language">Language</span>
                </a>
                <ul class="dropdown-menu with-arrow pull-right list-langs" role="menu">
                    <li data-ng-show="lang !== 'English' ">
                        <a href="javascript:;" data-ng-click="setLang('English')">English</a></li>
                </ul>
            </li>

        </ul>        
    </div>

</header>

My navbar.html is as follows
<div id="nav-wrapper" >
    <div ng-switch="isAuthenticated()">
        <ul id="nav" role="navigation" ng-controller="NavbarController"
            data-collapse-nav data-highlight-active data-slim-scroll>

            <li ui-sref-active="active" ng-switch-when="false"><a
                href="#/login"> <i class="fa fa-user"></i> <span
                    class="icon-bg bg-danger"></span> <span class="hidden-tablet"
                    translate="global.menu.account.login">Login</span>
            </a></li>

            <li ui-sref-active="active" ng-switch-when="false"><a
                href="#/register"> <i class="fa fa-user"></i> <span
                    class="icon-bg bg-danger"></span> <span class="hidden-tablet"
                    translate="global.menu.account.register">Register</span>
            </a></li>

            <li ui-sref-active="active" ng-switch-when="true"><a
                ui-sref="home"> <i class="fa fa-home"> <span
                        class="icon-bg bg-danger"></span></i> <span class="hidden-tablet"
                    translate="global.menu.home">Dashboard</span>
            </a></li>

            <li ui-sref-active="active" ng-switch-when="true"><a
                ui-sref="credential"><i class="fa fa-cloud"><span
                        class="icon-bg bg-orange"></span></i><span class="hidden-tablet"
                    translate="global.menu.entities.credential">Credential</span></a></li>
            <li ui-sref-active="active" ng-switch-when="true"><a
                ui-sref="schedule"><i class="fa fa-calendar"><span
                        class="icon-bg bg-warning"></span></i><span class="hidden-tablet"
                    translate="global.menu.entities.schedules">Schedules</span></a></li>
            <li ui-sref-active="active" ng-switch-when="true"><a
                ui-sref="userTask"><i class="fa fa-tasks"><span
                        class="icon-bg bg-info"></span></i><span class="hidden-tablet"
                    translate="global.menu.entities.userTask">Tasks</span></a></li>
            <li ui-sref-active="active" ng-switch-when="true"><a
                ui-sref="taskExecutionLog"><i class="fa fa-bar-chart-o"><span
                        class="icon-bg bg-primary"></span></i><span class="hidden-tablet"
                    translate="global.menu.admin.logs">Logs</span></a></li>
            <li>
                <a href="#/password"><i class="fa fa-user"><span class="icon-bg bg-danger"></span></i><span 
                translate="global.menu.account.settings">Account></span></a>
                <ul>
                    <li ui-sref-active="active"><a ui-sref="password"><i class="fa fa-caret-right"></i><span translate="global.menu.account.password">Password</span></a></li>
                    <li ui-sref-active="active"><a ui-sref="settings"><i class="fa fa-caret-right"></i><span translate="global.menu.account.settings">Settings</span></a></li>
                    <li ui-sref-active="active"><a href="" ng-click="logout()"><i class="fa fa-caret-right"></i><span translate="global.menu.account.logout">Logout</span></a></li>
                </ul>
            </li>
        </ul>
    </div>
</div>

Answer 1

你好 Demo，你是否查看了你的 CSS 文件，并通过 @media 查询检查了可折叠菜单是否在较小的屏幕上被禁用，例如 @media (min-width: xxpx ) 可用于为不同的媒体定义不同的样式规则 types/devices。希望这有帮助。

Twitter Bootstrap - 下拉菜单未显示在移动设备上

Twitter Bootsrap - Dropdown Menu not showing on mobile devices

angularjs

twitter-bootstrap

twitter-bootstrap-3

jhipster