html - 导航折叠按钮不适用于 iPad

Question

在除 iPad 之外的任何其他地方工作，还添加了视口(viewport):

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

请帮我找到解决方案，参见my website .

这是在 iPhone 上查看结果的方式.

这是在 iPad 上查看结果的方式.

HTML:

<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
    <div class="top">
        <div class="container topmenu">
            <ul class="nav nav-pills pull-right" style="margin-top: -1px;">
                <li role="presentation"><a href="#" data-toggle="modal" data-target="#loginModal">Login</a>
                </li>
                <li role="presentation"><a href="#" data-toggle="modal" data-target="#registerModal">Register</a>
                </li>
                <li role="presentation">
                    <a href="https://www.facebook.com/pages/allvideolecturescom/320909451432640" class="soc">
                    <img src="http://allvideolectures.com/img/facebook_top.png" alt="" />
                    </a>
                </li>
                <li role="presentation">
                    <a href="https://twitter.com/videolecture" class="soc">
                    <img src="http://allvideolectures.com/img/twitter_top.png" alt="" />
                    </a>
                </li>
                <li role="presentation">
                    <a href="https:/google.com/+Allvideolectures" class="soc">
                    <img src="http://allvideolectures.com/img/google_top.png" alt="" />
                    </a>
                </li>
            </ul>
        </div>
    </div>
    <div class="container">
    <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="http://allvideolectures.com/">
        <img src="http://allvideolectures.com/img/logo.png" alt="all video lectures let's learn" /><span class="logoleft">ALLVIDEO</span><span class="logoright">LECTURES.COM</span>
        </a>
    </div>
    <div id="navbar" class="navbar-collapse collapse mainmenu">
        <ul class="nav navbar-nav pull-right">
            <li role="presentation"><a href="http://allvideolectures.com/">Home</a>
            </li>
            <li role="presentation" class="active"><a href="http://allvideolectures.com/courses">Courses</a>
            </li>
            <li role="presentation"><a href="http://allvideolectures.com/blog">Blog</a>
            </li>
            <li role="presentation"><a href="http://allvideolectures.com/aboutus">About</a>
            </li>
            <li role="presentation"><a href="http://allvideolectures.com/contactus">Contact us</a>
            </li>
            <li role="presentation">
                <form method="get" action="http://allvideolectures.com/search/">
                    <input type="text" name="search" class="form-control" required placeholder="Start Learning...">
                    <input type="submit" value="" class="searchbtn1">
                </form>
            </li>
        </ul>
    </div>
    <!--/.navbar-collapse -->
</nav>

Answer 1

首先你应该阅读documentation您正在使用的框架:

Changing the collapsed mobile navbar breakpoint

The navbar collapses into its vertical mobile view when the viewport is narrower than @grid-float-breakpoint, and expands into its horizontal non-mobile view when the viewport is at least @grid-float-breakpoint in width. Adjust this variable in the Less source to control when the navbar collapses/expands. The default value is 768px (the smallest "small" or "tablet" screen).

您的代码运行良好，但使用默认变量值。

如果你想在 768px 上折叠 navbar(可能还有其他组件)，你应该覆盖你的 variables.less具有较大值的文件，例如 @screen-md-min (992px):

@grid-float-breakpoint: @screen-md-min;

有关 Bootstrap 变量覆盖的更多信息，请参阅 this question .