Question

任何人都可以帮我弄清楚为什么我的菜单没有显示在我的移动设备上。可折叠菜单在浏览器中显示正常但在移动（或窄浏览器窗口）上，当您单击应显示链接的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

Hello Demo让你查看你的CSS文件并检查通过@media查询的方式没有为较小的屏幕禁用可折叠菜单，例如@media（min-width：xxpx）可用于定义不同媒体类型/设备的不同风格规则。希望这会有所帮助。

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

1 个答案: