Fatal编程技术网

Twitter bootstrap 响应导航条不工作

twitter-bootstrap

Twitter bootstrap 响应导航条不工作,twitter-bootstrap,navbar,Twitter Bootstrap,Navbar,我第一次尝试Bootstrap，我的代码基于他们的示例： 我基本上复制了主要内容的html代码，但在我的版本中，响应导航栏不起作用，因为当我单击“汉堡按钮”时，导航元素不会出现 我的代码： <!DOCTYPE html> <html> <head> <title>Bootstrap Test</title> <meta name="viewport" content="width=device-width,

我第一次尝试Bootstrap，我的代码基于他们的示例：

我基本上复制了主要内容的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>


自举测试

    

  • 

  • 

  • 


你好，世界！
我的引导文件来自引导自定义站点。我包括了构建中的所有内容，包括响应性导航栏

我哪里做错了

谢谢大家

更新

我删除了main.css文件，因此没有冲突。我再次尝试从customize页面下载bootstrap，所有内容都打勾：twitter.github.com/bootstrap/customize.html，但仍然遇到同样的问题。它给我的css文件叫做bootstrap.css，而不是bootstrap-combined.css。引导自定义页面有问题吗？？？

请检查以下内容：

我用的是你们的html，我用的是CDN版本的CSS和JS——我觉得一切都很好

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，是否正在加载引导js文件，以及main.CSS中是否存在导致冲突的内容

祝你好运

这确实是你正在使用的bootstrap-responsive.css文件吗？该文件名为bootstrap.css，它是从定制引导页面下载的，并勾选了responsive（事实上，所有内容都勾选了）。你还在处理这个Jamie吗？我现在已经修复了它。有趣的是，问题在于我使用的是在线Cloud9IDE，出于某种原因，Cloud9没有提供任何JS文件。我在几个小时内又做了一次tred，效果很好。我删除了main.css文件，所以没有冲突。我再次尝试从customize页面下载bootstrap，但仍然遇到同样的问题。它给我的css文件叫做bootstrap.css，而不是bootstrap-combined.css。引导自定义页面有问题吗？我刚刚使用您正在使用的自定义页面中的css文件制作了另一个fork：。。。一切看起来都很好，所以这不是原因。问题可能是没有加载js文件。仔细检查您的路径或尝试使用上面的CDN链接。