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

Question

So here's my code: 所以这是我的代码：

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

And for some reason, the navigation bar styles perfectly, however it doesn't seem to fix itself to the top of the page when scrolling. 出于某种原因，导航栏的样式完美，但滚动时似乎无法将其固定在页面顶部。 It seems so trivial... what am I doing wrong here? 似乎很琐碎...我在这里做错了什么？

Answer 1

It seems to work fine here. 在这里似乎工作正常。

However, bootstrap-responsive, in smaller layout, unfix the nav bar in order to optimize the space... 但是，在较小的布局中，引导响应式的导航栏未固定，以优化空间。

You can try to remove bootstrap-responsive.css and see if it works. 您可以尝试删除bootstrap-responsive.css并查看其是否有效。

DEMO DEMO

Answer 2

I took your exact HTML and everything looks good to me: 我使用了您的确切HTML，对我来说一切看起来都很好：
view live 现场观看
edit 编辑

A couple of things you could check. 您可以检查几件事。

Remember that by default, the fixed-top behaviour is removed for tablets and below, so make sure you are checking at viewport > 767px. 请记住，默认情况下，平板电脑及以下平板电脑的固定顶部行为已删除，因此请确保您在视口> 767px处进行检查。 Also you have an older version of jQuery (v1.10.1) so probably good to use something more recent. 另外，您还有旧版本的jQuery（v1.10.1），因此最好使用较新的版本。

Hope this helps! 希望这可以帮助！

为什么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