关于响应式导航条的问题?

关于响应式导航条的问题?

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Bootstrap 实例 - 响应式的导航栏</title>
		<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet">

	   <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>

		<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.js"></script>
</head>
<body>

<nav class="navbar navbar-default" role="navigation">
	<div class="container-fluid"> 
	<div class="navbar-header">
		<button type="button" class="navbar-toggle" data-toggle="collapse"
				data-target="#example-navbar-collapse">
			<span class="sr-only">切换导航</span>
			<span class="icon-bar"></span>
			<span class="icon-bar"></span>
			<span class="icon-bar"></span>
		</button>
		<a class="navbar-brand" href="#">菜鸟教程</a>
	</div>
	<div class="collapse navbar-collapse" id="example-navbar-collapse">
		<ul class="nav navbar-nav">
			<li class="active"><a href="#">iOS</a></li>
			<li><a href="#">SVN</a></li>
			<li class="dropdown">
				<a href="#" class="dropdown-toggle" data-toggle="dropdown">
					Java <b class="caret"></b>
				</a>
				<ul class="dropdown-menu">
					<li><a href="#">jmeter</a></li>
					<li><a href="#">EJB</a></li>
					<li><a href="#">Jasper Report</a></li>
					<li class="divider"></li>
					<li><a href="#">分离的链接</a></li>
					<li class="divider"></li>
					<li><a href="#">另一个分离的链接</a></li>
				</ul>
			</li>
		</ul>
	</div>
	</div>
</nav>

</body>
</html>


这是一个响应式导航条的实例,当我手动缩放浏览器的屏幕时,能够实现响应式;但是;当我F12打开开发者模式,切换到移动端时,无论是选手机还是ipad都没有任何响应变化,这是咋回事????

正在回答

登陆购买课程后可参与讨论,去登陆

3回答

移动端还需要设置meta吧

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


  • 夜幕客船 提问者 #1
    恩恩 是这样;虽然响应式导航条;但还是必须要依赖viewport,侦探窗口;案例只是给了HTML的主代码,但是meta name=“viewport”还是要自己给补上;一定不能忘!
    2017-12-17 21:12:20
提问者 夜幕客船 2017-12-16 21:12:15

我这个就是复制过来的,但不是bootstrap上,bootstrap上的那个代码量不全,直接复制完全没办法用!

qq_守林人_2 2017-12-16 16:05:28

可以到bootstrap中文网复制类似代码

问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
响应式开发与常用框架 2018
  • 参与学习           人
  • 提交作业       2198    份
  • 解答问题       5012    个

如果你有web端基础,既想进阶,又想进军移动端开发,那就来吧,我们专题为你带来的课程有HTML5、CSS3、移动基础、响应式、bootstrap、less等,让你在前端道路上畅通无阻!

了解课程
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师