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

Question

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

示例：从移动设备的角度来看，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：去掉url末尾的show就可以看到html了

更新：基本上这是他们应用于 div 以使其固定在顶部的内容。

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