对于具有很长垂直页面布局的应用程序,如何将TwitterBootstrap的导航栏固定在屏幕顶部？

Question

我从http://www.initializr.com/下载了bootstrap模板 我的问题是,当我向下滚动到我的网页页脚时,如何将导航栏固定在屏幕顶部？为了更好地了解我想要实现的目标,我制作了截图.

示例:在移动设备透视图中,NAVBAR已修复

示例:当我向下滚动到页面的页脚时,我希望NAVBAR保持固定在屏幕顶部.如您所见,NAVBAR无法保持固定在屏幕顶部.

码:

<div class="navbar navbar-fixed-top">
            <div class="navbar-inner">
                <div class="container">
                    <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </a>
                    <a class="brand" href="#"><img src="img/pldttranssmall.png"></a>
                    <div class="nav-collapse collapse">
                        <ul class="nav">
                            <li class="active">
                                <a href="#">Home</a>
                            </li>
                            <li>
                                <a href="#about">About</a>
                            </li>
                            <li>
                                <a href="#product">Product and Services</a>
                            </li>
                            <li>
                                <a href="#investor">Investor Relations</a>
                            </li>
                            <li>
                                <a href="#support">Get Support</a>
                            </li>
                        </ul>
                        <form class="navbar-form pull-right">
                            <input class="span2" type="text" placeholder="Search">
                            <button type="submit" class="btn btn-default">
                                <i class="icon-search icon-black"></i>Go
                            </button>
                        </form>
                    </div><!--/.nav-collapse -->
                </div>
            </div>
        </div>

我该如何实现这一目标？

Answer 1

只需将导航栏包装在div中,然后将这些css类添加到其样式中 class="navbar navbar-fixed-top"

示例:http://jsfiddle.net/codovations/Uy5tt/show/

PS:从网址末尾删除show以查看html

更新:基本上这是他们应用于div以使其固定在顶部.

.navbar-fixed-top {
    position: fixed;
    right: 0;
    left: 0;
    z-index: 1030;
    top: 0;
}