导航折叠按钮不适用于 iPad答案

【问题标题】：Navigation collapse button not working for iPad导航折叠按钮不适用于 iPad
【发布时间】：2015-08-21 10:05:43
【问题描述】：

除了 iPad 之外的其他任何地方都可以工作，还添加了视口：

<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>

【问题讨论】：

感谢编辑@Tasos
你想达到什么结果？
和iphone一样@SergeyDenisov
mobt.me/BK8T 在这里
你看到我的回答了吗？

标签： html css twitter-bootstrap less

【解决方案1】：

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

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

当视口比@grid-float-breakpoint 窄时，导航栏折叠到其垂直移动视图，当视口宽度至少为@grid-float-breakpoint 时，导航栏展开到其水平非移动视图。在 Less 源中调整此变量以控制导航栏何时折叠/展开。默认值为768px（最小的“小”或“平板”屏幕）。

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

如果您想在768px 上折叠navbar（可能还有其他组件），您应该使用更大的值覆盖您的variables.less 文件，例如@screen-md-min (992px)：

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

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

【讨论】：