gpt4 book ai didi

jquery - 简单的 Bootstrap 导航栏不会在移动设备上折叠

转载 作者:太空宇宙 更新时间:2023-11-03 22:44:10 26 4
gpt4 key购买 nike

也许我遗漏或不理解某些东西,但是,我已经尝试了所有可能的方法并最终得到了相同的结果。

我的问题

我已经简化了我的页面,以至于我只使用了 example from w3schools。用于响应式导航栏。当我调整浏览器窗口大小时,导航栏会按预期折叠。 In my JSFIDDLE导航栏按预期折叠,但是只要我转到移动设备,我的导航栏就不会折叠...我在这里做错了什么?

浏览器调整大小

enter image description here

浏览器调整大小正常工作!

移动设备

enter image description here

移动设备不工作,为什么?我在这里做错了什么?这是一个link to my JSFIDDLE

<head>
<script
src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" >
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" >
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" </script>
</head>

<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Page 1</a></li>
<li><a href="#">Page 2</a></li>
<li><a href="#">Page 3</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li>
<li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
</ul>
</div>
</div>
</nav>

最佳答案

您的代码中似乎缺少 Viewport 标签,仔细检查您的代码并确保您有可用的 viewport 标签,如果没有,请添加以下代码:

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

您的 JSFiddle 示例在调整到较小的宽度时工作正常

关于jquery - 简单的 Bootstrap 导航栏不会在移动设备上折叠,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42777770/

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