twitter-bootstrap – 响应式导航栏无法正常工作
我第一次尝试Bootstrap,我在这里的代码基于我的代码:
http://twitter.github.com/bootstrap/examples/starter-template.html 我基本上复制了主要内容html代码,但在我的版本中,响应式导航栏不起作用,因为当我点击“汉堡包按钮”时,导航元素不会出现. 我的代码: <!DOCTYPE html> <html> <head> <title>Bootstrap Test</title> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <link href="css/bootstrap.css" rel="stylesheet" media="screen"> <link href="css/main.css" rel="stylesheet" media="screen"> </head> <body> <div class="navbar navbar-inverse navbar-fixed-top"> <div class="navbar-inner"> <div class="container"> <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="brand" href="#">Project name</a> <div class="nav-collapse collapse"> <ul class="nav"> <li class="active"><a href="#">Home</a></li> <li><a href="#about">About</a></li> <li><a href="#contact">Contact</a></li> </ul> </div><!--/.nav-collapse --> </div> </div> </div> <div class="container"> <h1>Hello,world!</h1> </div> <!-- /container --> <script src="http://code.jquery.com/jquery.js"></script> <script src="js/bootstrap.js"></script> </body> </html> 我的引导程序文件来自Bootstrap自定义站点.我在构建中包含了所有内容,包括响应式导航栏. 我哪里错了. 感谢大家. UPDATE 我删除了我的main.css文件,所以没有冲突.我再次尝试从自定义页面下载bootstrap,其中包括所有内容:twitter.github.com/bootstrap/customize.html并仍然遇到同样的问题.它给我的css文件叫做bootstrap.css而不是bootstrap-combined.css. bootstraps定制页面有问题吗? 解决方法
看一下这个:
http://jsfiddle.net/panchroma/4XEnD/ 我拿了你的确切的HTML,我正在使用CSS和JS的CDN版本 – 一切看起来都不错. http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/js/bootstrap.min.js 仔细检查您是否正在使用响应式引导程序CSS,正在加载Bootstrap js文件以及main.css中没有导致冲突的内容. 祝好运! (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |