为什么Twitter引导类navbar-fixed-top不起作用？

Question

所以这是我的代码：

<!DOCTYPE HTML>
<html>
  <head>
    <title></title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link rel="stylesheet" href="libs/bootstrap/css/bootstrap.css" />
    <link rel="stylesheet" href="libs/bootstrap/css/bootstrap-responsive.css" />
    <link rel="stylesheet" href="css/main.css" />
  </head>
  <body>

    <div class="navbar navbar-inverse navbar-fixed-top"> <!-- header nav -->
      <div class="navbar-inner">
        <div class="container">
          <ul class="nav">

            <li class="active">
              <a href="#">Home</a>
            </li>

            <li>
              <a href="#">About us</a>
            </li>

            <li>
              <a href="#">Contact Us</a>
            </li>

            <li>
              <a href="#">Derp</a>
            </li>

          </ul>

          <span class="brand"></span>
        </div>
      </div>
    </div>

    <div class="container">

      <div class="row">

        <div class="span3" style="background:grey; height:200px;"></div>
        <div class="span9" style="background:lightgrey; height:20000px;"></div>

      </div>

    </div> 

    <div class="footer" style="height:100px"> <!-- footer --> 
    </div> 

    <script type="text/javascript" src="libs/jquery-1.10.1.min.js"></script>
    <script type="text/javascript" src="libs/bootstrap/js/bootstrap.min.js"></script>
    <script type="text/javascript" scr="js/main.js"></script>
  </body>
</html>

出于某种原因，导航栏的样式完美，但滚动时似乎无法将其固定在页面顶部。 似乎很琐碎...我在这里做错了什么？

Answer 1

在这里似乎工作正常。

但是，在较小的布局中，引导响应式的导航栏未固定，以优化空间。

您可以尝试删除bootstrap-responsive.css并查看其是否有效。

DEMO

Answer 2

我使用了您的确切HTML，对我来说一切看起来都很好：
现场观看
编辑

您可以检查几件事。

请记住，默认情况下，平板电脑及以下平板电脑的固定顶部行为已删除，因此请确保您在视口> 767px处进行检查。 另外，您还有旧版本的jQuery（v1.10.1），因此最好使用较新的版本。

希望这可以帮助！

为什么Twitter引导类navbar-fixed-top不起作用？

问题描述

2 个解决方案

解决方案1
1 2013-06-14 19:25:08

解决方案2
1 2013-06-14 19:25:12

为什么Twitter引导类navbar-fixed-top不起作用？

问题描述

2 个解决方案

解决方案1 1 2013-06-14 19:25:08

解决方案2 1 2013-06-14 19:25:12

解决方案1
1 2013-06-14 19:25:08

解决方案2
1 2013-06-14 19:25:12