Question

导航栏上方的导航不在正文（Screenshot）的顶部。

来源：

<div class="container-fluid" style="background-color:#F44336;color:#fff;height:200px;">
    <h1>Bootstrap Affix Example</h1>
    <h3>Fixed (sticky) navbar on scroll</h3>
    <p>Scroll this page to see how the navbar behaves with data-spy="affix".</p>
    <p>The navbar is attached to the top of the page after you have scrolled a specified amount of pixels.</p>
</div>

    <div class="navbar navbar-inverse" style="background-color:#026;" data-spy="affix" data-offset-top="197">
        <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>
            </div>
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                    <li>@Html.ActionLink("ՏԵՍԱԿՆԵՐ", "Index", "Home")</li>
                    <li>@Html.ActionLink("ՕԳՏԱԿԱՐ ՆՅՈՒԹԵՐ", "About", "Home")</li>
                    <li>@Html.ActionLink("ԿԼԻՆԻԿԱՆԵՐ", "Contact", "Home")</li>
                    <li>@Html.ActionLink("ԲԺԻՇԿՆԵՐ", "Contact", "Home")</li>
                    <li>@Html.ActionLink("ՆՈՐՈՒԹՅՈՒՆՆԵՐ", "Contact", "Home")</li>
                    <li>@Html.ActionLink("ԲԼՈԳ", "Contact", "Home")</li>
                </ul>
            </div>
        </div>
    </div>


.affix {
        top: 0;[enter image description here][1]
        width: 100%;
        z-index: 9999 !important;
    }

        .affix + .container-fluid {
            padding-top: 70px;
        }

我什至尝试使用JavaScript，但这无济于事。我想Bootstrap不允许我这样做。

Answer 1

您是否尝试过将position:absolute或position:fixed添加到 .container-fluid 元素的css中？

（https://developer.mozilla.org/en-US/docs/Web/CSS/position）

我无法重新提出您的问题。它应该起作用，因为它几乎是w3schools中的示例。

如果您以stack snippet或bootply或jsfiddle之类的代码提供了最小的工作示例，则可能会有所帮助。

Answer 2

我假设您希望导航栏位于页面底部，并且您希望背景色填充整个项目页面（编码区域）。

要解决此问题...

直接在body标签内添加包装器div（称为.bg之类）
将.bg类设置为100（w-100）的宽度
确保导航栏不在您的.container类中，但仍位于.bg包装器类中

在下面，我制作了一个简单的带有背景颜色的引导程序网页，并在底部设置了导航栏。为了简洁起见，我没有使用css，而是使用了bootstrap包含的类来表示背景颜色，页边距等。

如果您希望整个网页都是一种颜色，请将html标签css设置为

background-color：#somecolor;

祝你好运！

<!DOCTYPE html>
<html lang="en">
    <head>
        <!-- Latest compiled and minified CSS -->
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
    </head>

    <body>
        <div class="bg bg-danger">
            <div class="container-fluid">
                <div class="row w-100">
                    <h4>Bootstrap Afix Example</h4>
                </div>
                <div class="row w-100 mt-5">
                    <button type="button" class="btn-primary">button :)</button>
                </div>
                
                </div>
                <nav class="navbar navbar-default sticky-top navbar-light mt-3 w-100 bg-secondary">
                    <ul class="nav mr-auto mt-1 mb-1">
                        <li class="nav-item">
                            <a href="INSERT_YOUR_LINK" class="nav-item text-warning">Home</a>
                        </li>
                        <li class="nav-item ml-3">
                            <a href="INSERT_YOUR_LINK" class="nav-item text-warning">About</a>
                        </li>
                    </ul>
                </nav>
            </div>
        </div>

        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    </body>
</html>

导航栏上方的div看起来不符合预期

2 个答案: