Bootstrap固定导航栏无效。

Question

我正在使用Bootstrap的affix功能，一旦滚动到顶部，就会将我的导航栏固定在顶部。我在div中添加了affix属性，但它仍然无法正常工作。我已经引入了bootstrap.min.css和bootstrap.min.js。还有其他需要注意的地方吗？

   <div id="nav-wrapper"><!--nav-wrapper-->
        <div class="container"><!--container-->
            <div class="row" id="navigation"><!--header-->
                <div class="col-md-12" data-spy="affix" data-offset-top="60" data-offset-bottom="200"><!--col-md-12-->

                     <div class="nav"><!--nav-->
                        <div class="menu-main-menu-container">
                         <ul>
                              <li></li>
                              <li></li>
                              <li></li>

                         </ul></div>                
                        </div><!--nav-->     
                   </div><!--col-md-12-->
                <div class="clearfix"></div>
            </div><!--header-->
        </div><!--container-->
    </div>

- user3949359

---

在这两种情况下，您必须提供CSS来定位和设置固定内容的宽度。 - Scott Simpson

我在我的CSS中已经将它们定位好了，只是没有在这里发布，因为它很长。 - user3949359

如果这篇文章太长了，也许考虑使用 JSFiddle？ - yunandtidus

Answer 1

我发现这个可以工作：

JS：

$(function() {
    $('#nav-wrapper').height($("#nav").height());

    $('#nav').affix({
        offset: { top: $('#nav').offset().top }
    });
});

CSS:

#nav.affix {
    position: fixed;
    top: 0;
    width: 100%
}

#nav > .navbar-inner {
    border-left: 0;
    border-right: 0;
    border-radius: 0;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    -o-border-radius: 0;
}

- user3949359