gpt4 book ai didi

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

转载 作者:太空狗 更新时间:2023-10-29 15:04:56 26 4
gpt4 key购买 nike

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

最佳答案

首先你应该阅读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 .

关于html - 导航折叠按钮不适用于 iPad,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30683752/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com