Question

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

Answer 1

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

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

当视口比@grid-float-breakpoint窄时，导航栏会折叠到其垂直移动视图中，并且当视口的宽度至少为@grid-float-breakpoint时，会扩展为其水平非移动视图。在Less source中调整此变量以控制导航栏折叠/展开的时间。默认值为768px（最小的＆＃34;小＆＃34;或＆＃34;平板电脑＆＃34;屏幕）。

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

如果您想在navbar上展开768px（以及其他组件也可能），则应覆盖variables.less较大值的文件，例如使用@screen-md-min（ 992px）：

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

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

导航折叠按钮不适用于iPad

1 个答案: