时间戳

首页 > 解决方案 > 导航栏上方的 div 看起来不像预期的那样

html - 导航栏上方的 div 看起来不像预期的那样

问题描述

导航栏上方的 Div 不在正文顶部（截图）。

资源：

<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 不允许我这样做。

标签： htmlcsstwitter-bootstrapbootstrap-4

解决方案

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

要解决这个...

  • 直接在body标签内添加一个包装器div（称之为.bg或其他东西）
  • 将 .bg 类设置为宽度 100 (w-100)
  • 确保导航栏不在您的 .container 类中，但仍在 .bg 包装类中

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

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

背景颜色：#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>

推荐阅读