Bootstrap navbar-fixed-top 不工作答案

【问题标题】：Bootstrap navbar-fixed-top not workingBootstrap navbar-fixed-top 不工作
【发布时间】：2021-07-20 06:11:18
【问题描述】：

我在我的网站上使用 Bootstrap 的 navbar-top-fixed，但它似乎不起作用。当我向下滚动时，它没有固定在顶部。

这是我的 HTML 代码：

<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
  <div class="gdgt-menu">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <div class="gdgt-logo">
        <a class="navbar-brand" href="<?php echo get_site_url(); ?>" rel="bookmark">brand</a>
      </div>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="nav-items collapse navbar-collapse" id="bs-example-navbar-collapse-1">
        <!--my menu is here-->
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

这是 CSS：

.gdgt-menu{
  padding-right: 10%;
  padding-left: 10%;
}

@media only screen and (min-width : 200px) and (max-width : 768px) {

  .navbar{
    margin-bottom: 0px !important;
  }

  .navbar-collapse {
    width: 100%;
  }

  .menu-header-container{
    width: 100%;
  }

  .gdgt-menu{
    padding-right: 0% !important;
    padding-left: 0% !important;
  }

  #bs-example-navbar-collapse-1 .current-menu-item a {
  padding-right: 100% !important;
}



}

@media only screen and (min-width : 200px) and (max-width : 768px) {

  .featured-content{
    width: 100%;
    margin-right: 0px !important;
    margin-left: 0px !important;
  }


}
@media only screen and (min-width : 768px) and (max-width : 1010px) {

  .gdgt-menu{
    padding-right: 0% !important;
    padding-left: 0% !important;
  }

  .nav-items{
    width: 85% !important;
  }

}


.nav-items{
    width: 70%;
    float: right;
}


.navbar{
    height: 60px;
    display: block;
    position: relative;
}

.menu{
  margin: 0px !important;

  padding-left: 0px !important;
}

.menu-header-container{
  float: right;
}

@media only screen and (min-width : 200px) and (max-width : 768px) {

  .menu-header-container{
    background-color: #2c3e50;
  }

  .menu li{
    width: 100% !important;
  }
}
.menu li{
  list-style-type: none;
  line-height: 60px;
  width: auto;
  float: left;
  transition: all 0.2s ease-in-out;
}

.menu li:hover{
  background-color: #34495e;
}

.menu a{
  color: #fff;
  text-decoration: none;
  padding-left: 20px;
  padding-right: 20px;
}

知道是什么导致了这个问题吗？我不太确定为什么会这样。但是，我觉得@media 是造成这种情况的原因。

请帮忙:)

【问题讨论】：

可能是因为您在 CSS 中设置了 .navbar { position: relative; }
谢谢！它工作:)

标签： jquery html css twitter-bootstrap

【解决方案1】：

您正在覆盖 .fixed-top-navbar 的引导程序默认定位。

来自 bootsrap.css

.navbar-fixed-top,
.navbar-fixed-bottom {
  position: fixed; /* <-- Look here */
  right: 0;
  left: 0;
  z-index: 1030;
}

来自您的代码：

.navbar{
    height: 60px;
    display: block;
    position: relative; /* <-- Oh dear */
}

【讨论】：

【解决方案2】：

引导4+

正确的类应该是：fixed-top 而不是“nav-fixed-top”。它很微妙，但它使世界变得与众不同！

<nav class="navbar fixed-top navbar-expand-lg navbar-light bg-light">    
    <--etc -->
</nav>

我相信使用 bootstrap 4 您还必须手动添加一些填充，否则导航栏可能会与某些内容重叠。请检查文档。

【讨论】：

【解决方案3】：

更改您的代码：

.navbar {
    height: 60px;
    display: block;
    position: fixed;
}

【讨论】：