jquery - Bootstrap 导航栏不保持顶部和宽度

Question

出于某种原因，导航栏不会停留在页面顶部。换句话说，它是 scollable。
这是我的代码:

<div class="navbar-wrapper">
    <div class="container">

        <div class="navbar navbar-inverse navbar-static-top" role="navigation">
            <div class="container">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    @Html.ActionLink("The Secured Password", "Index", "Home", null, new { @class = "navbar-brand" })
                </div>
                <div class="navbar-collapse collapse">
                    <ul class="nav navbar-nav">
                        <li>@Html.ActionLink("Home", "Index", "Home")</li>
                        <li>@Html.ActionLink("About", "About", "Home")</li>
                        <li>@Html.ActionLink("Contact", "Contact", "Home")</li>
                    </ul>
                    @Html.Partial("_LoginPartial")
                </div>
            </div>
        </div>
    </div>
</div>

这样做有什么原因吗？此外，由于我使用了 navbar-inverse，因此导航栏具有黑色背景。但是，它并不完全适合屏幕。我怎样才能确保它适合整个屏幕？谢谢。

Answer 1

我不确定这是否是 bootstrap 的正确行为(我从未使用过它)，但您可以让这些东西按照您想要的方式运行。

http://jsfiddle.net/F7XH8/

    .navbar-wrapper { background: black; position: fixed; top: 0; right: 0; left: 0; width: 100%; color: white; }
    .main { margin: 10em 0; }

我添加了“.main”以便它有内容可以滚动。