如何在移动设备中显示折叠菜单？

Question

我有一个bootstrap 3折叠菜单。

在iphone中看起来像这样：

以下是代码：

<div class="navbar navbar-fixed-top visible-phone">
    <div class="navbar-inner">
        <div class="container">

            <!--Button to collapse the Navigation-->
            <a class="btn btn-navbar" data-toggle="collapse"
               data-target=".nav-collapse">
                <img src="images/expand-menu-button.png"></a>
                <div class="nav-collapse collapse">
                    <ul class="nav nav-justified">
                        <li><a href="#">Velkommen</a></li>
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle"
                               data-toggle="dropdown">
                                <span class="caret"></span></a>
                            <ul class="dropdown-menu" role="menu">
                                <li><a href="Personale"</a></li>

                                </ul>
                            </li>
                        </ul>
                    </div>
                    <!--/.nav-collapse -->
                </div>
            </div>
        </div> 

但我需要在ipad和桌面上显示正常菜单。现在这个菜单按钮也适用于ipad和桌面。我怎样才能克服这个问题？

Answer 1

看看这个，也许它会有所帮助。如果您在桌面窗口中缩放它，它将在必要时适当地跳转到移动显示。

<nav role="navigation" class="navbar navbar-default">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
        <button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
        Welcome
    </div>
    <!-- Collection of nav links and other content for toggling -->
    <div id="navbarCollapse" class="collapse navbar-collapse">
        <ul class="nav navbar-nav navbar-left">
            <li>Link 1</li>
            <li>Link 2</li>
        </ul>
    </div>
</nav>

Answer 2

我认为问题出在你的navbar课程中。您缺少role="navigation"，这使得可以从不同的设备和尺寸访问导航栏。您也不应该需要visible-phone。

变化：

<div class="navbar navbar-fixed-top visible-phone">

要：

<div class="navbar navbar-fixed-top visible-phone" role="navigation">

可以通过更改来解决另一个问题：

<div class="nav-collapse collapse">

要：

<div class="collapse navbar-collapse">

Answer 3

可能您错过了用于启用响应能力的视口元标记，as mentioned in the Bootstrap docs？：

<meta name="viewport" content="width=device-width, initial-scale=1">