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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
<!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下载

慕课网APP
您的移动学习伙伴

公众号

扫描二维码
关注慕课网微信公众号

在线咨询

领取优惠

免费试听

领取大纲

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