Question

我正在为我的网站设计一个粘性顶部导航栏，我已经按照Bootstrap在他们网站上提供的文档进行了查看，并在此处查看了之前提出的问题，但我无法理解为什么它不起作用。任何帮助都会很棒

        <!DOCTYPE html>

        <html>


<nav class="navbar navbar-expand-sm bg-dark navbar-dark sticky-top">
    <div class="collapse navbar-collapse justify-content-center" id="navbarNav">
        <ul class="navbar-nav">
            <li class="nav-item active">
                <a class="nav-link" href="about.html">ABOUT</a>
            </li>


            <li class="nav-item">
                <a class="nav-link" href="#">CLOTHING</a>
            </li>


            <li class="nav-item">
                <a class="nav-link" href="#">CLOTHING</a>
            </li>


        </ul>
    </div>
</nav>






    </body>
    </html>

CSS

.navbar {
    background-color: #2A2F35 !important;
    padding: 0 !important;
}

/*Navbar Links*/

.navbar-nav a {
    font-family: 'Open Sans', sans-serif;
    font-style: normal;
    font-size: 16px;
    font-weight: 100;
    letter-spacing: 1px;
    color: #ffffff !important;
    padding: 25px;
    margin: 0px 25px 0px 25px;
}

.navbar-nav a:hover {
    color: #ff6600 !important;
}

Answer 1

<nav class="navbar **fixed-top** navbar-light bg-light">

＆＃39;固定顶＆＃39;似乎不在导航班。

Answer 2

<nav class="navbar navbar-expand-sm bg-dark navbar-dark navbar-fixed-top"></nav>

使用navbar-fixed-top代替sticky-top

Answer 3

导入bootstrap 4后，以下代码可以正常工作

＆＃13;

.navbar {
    background-color: #2A2F35 !important;
    padding: 0 !important;
}

/*Navbar Links*/

.navbar-nav a {
    font-family: 'Open Sans', sans-serif;
    font-style: normal;
    font-size: 16px;
    font-weight: 100;
    letter-spacing: 1px;
    color: #ffffff !important;
    padding: 25px;
    margin: 0px 25px 0px 25px;
}

.navbar-nav a:hover {
    color: #ff6600 !important;
}
.height{
border:1px solid red;
min-height:500px;
}

＆＃13;

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<!--Nav bar Starts-->
<nav class="navbar navbar-expand-sm bg-dark navbar-dark sticky-top">
  <div class="collapse navbar-collapse justify-content-center" id="navbarNav">
    <ul class="navbar-nav">
      <li class="nav-item active">
        <a class="nav-link" href="about.html">ABOUT</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">CLOTHING</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">CLOTHING</a>
      </li>
    </ul>
  </div>
</nav>
<div class="height">

</div>

＆＃13;

Answer 4

这是一个较旧的版本，但是以防万一有人遇到相同的问题，当建议的Bootstrap 4粘性导航不起作用时，还要检查的另一件事是是否有任何父元素设置了以下CSS属性之一： / p>

溢出溢出溢出-x

如果将此属性设置为以下值之一，则将无效：自动，隐藏，覆盖，滚动。

只需将其删除或将其值更改为“未设置”即可。使用DevTools查找父元素

Answer 5

在你的CSS中添加以下行。由于缺少stikcy-top类定义

width: 100%;
position: fixed;
top: 0;

定位此类：class="navbar navbar-inverse navbar sticky-top"

Bootstrap 4粘性顶部不起作用

5 个答案: