Question

我第一次尝试使用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自定义站点。我在构建中包含了所有内容，包括响应式导航栏。

我哪里错了。

谢谢大家。

更新

我删除了我的main.css文件，所以没有冲突。我再次尝试从自定义页面下载bootstrap，其中包括所有内容：twitter.github.com/bootstrap/customize.html并仍然遇到同样的问题。它给我的css文件叫做bootstrap.css而不是bootstrap-combined.css。 bootstraps自定义页面有问题吗？

Answer 1

检查一下： 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中没有导致冲突的内容。

祝你好运！

响应导航栏无法正常工作

1 个答案: