导航折叠按钮不适用于iPad

Question

除了iPad之外在其他地方工作,查看端口还添加了:

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

请帮我找一个解决方案,看看我的网站.

以下是在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

首先,您应该阅读您正在使用的框架的文档:

更改折叠的移动导航栏断点

当视口比视口窄时,导航栏折叠到其垂直移动视图中@grid-float-breakpoint,并且当视口至少@grid-float-breakpoint在宽度时,导航栏扩展到其水平非移动视图.在Less source中调整此变量以控制导航栏折叠/展开的时间.默认值为768px(最小的"小"或"平板"屏幕).

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

如果您想要折叠navbar(也可能是其他组件)768px,则应覆盖具有较大值的variables.less文件,例如使用@ screen-md-min(992px):

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

有关Bootstrap变量覆盖的更多信息,请参阅此问题.