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，一切看起来都不错：
view live
edit

你可以检查几件事。

请注意，默认情况下，平板电脑及其下方的固定顶级行为已被删除，因此请务必检查视口＆gt; 767px。你也有一个旧版本的jQuery（v1.10.1），所以最好使用更新的东西。

希望这有帮助！

为什么Twitter bootstrap类没有navbar-fixed-top工作？

2 个答案: