关于响应式导航条的问题?
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都没有任何响应变化,这是咋回事????
24
收起
正在回答
3回答
移动端还需要设置meta吧
<meta name="viewport" content="width=device-width, initial-scale=1">
响应式开发与常用框架 2018
- 参与学习 人
- 提交作业 2198 份
- 解答问题 5012 个
如果你有web端基础,既想进阶,又想进军移动端开发,那就来吧,我们专题为你带来的课程有HTML5、CSS3、移动基础、响应式、bootstrap、less等,让你在前端道路上畅通无阻!
了解课程
恭喜解决一个难题,获得1积分~
来为老师/同学的回答评分吧