Question

出于某种原因，导航栏不会停留在页面顶部。换句话说，它的可分解性继承我的代码：

<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

我不确定这是否是引导程序的正确行为（我从未使用过它），但你可以按照自己的意愿行事。

http://jsfiddle.net/F7XH8/

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

我添加了＆＃34; .main＆＃34;所以它有滚动的内容。

Answer 2

添加.navbar-fixed-top，并添加.container或.container-fluid来固定和填充导航栏内容。

<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
  <div class="container">
    ...
  </div>
</nav>

来自Bootstrap文档：http://getbootstrap.com/components/#navbar-fixed-top

bootstrap navbar不会保持顶部和宽度

2 个答案: