1

所以这是我的代码：

<!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>

出于某种原因，导航栏的样式非常完美，但是在滚动时它似乎并没有固定在页面顶部。看起来如此微不足道......我在这里做错了什么？

4

2 回答 2

1

它似乎在这里工作正常。

然而，引导响应，在较小的布局中，取消固定导航栏以优化空间......

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

演示

于 2013-06-14T19:25:08.260 回答
1

我采用了您的确切 HTML，一切对我来说都很好：
查看实时
编辑

你可以检查几件事。

请记住，默认情况下，平板电脑及以下的固定顶部行为已被删除，因此请确保您在视口 > 767px 处进行检查。此外，您有一个旧版本的 jQuery (v1.10.1)，所以使用更新的东西可能很好。

希望这可以帮助！

于 2013-06-14T19:25:12.110 回答