html - Bootstrap 词缀不起作用

标签 html css twitter-bootstrap

我正在使用 Bootstrap 词缀在通过向下滚动到达导航栏后将其固定在顶部。我在 div 中添加了词缀属性,但它仍然无法正常工作。我同时导入了 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>

最佳答案

我发现这个有效:

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;
}

关于html - Bootstrap 词缀不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26665088/

相关文章:

css - Bootstrap 控件对齐 - 显示 : inline 时换行

html - 如何更改下拉列表的宽度?

javascript - 隐藏表格中某些列的边框

javascript - 单击时强制打开下拉菜单

html - HTTPS 破坏嵌入式 PDF

CSS 菜单转换不起作用

CSS Perspective 不适用于 body

jquery - 左侧双侧边栏+Bootstrap 3

html - DIV 中的元素开始一个新行

javascript - 保持警报消息在不同网页之间显示