在移动视口中时，如何阻止bootstrap 4导航栏粘在页面顶部？

Question

我希望导航栏在宽屏上保持粘性，并且可以正常工作。我不希望它在移动视口中折叠。在小屏幕上，如何使导航栏从顶部完全松开？这是我的HTML：

<div  class="navbar-light" style="position: sticky; top: 0px; background-color: #fff0d8;">  
<div class="container">
<ul class="sc-nav nav navbar-nav nav-fill w-100 flex-md-row">
<li class="nav-item">
    <a class="nav-link" href="#">aaa</a>
</li>
<li class="nav-item">
    <a class="nav-link" href="#">bbbb</a>
</li>
<li class="nav-item">
    <a class="nav-link" href="#">ccc</a>
</li>
<li class="nav-item">
    <a class="nav-link" href="#">ddd</a>
</li>
<li class="nav-item">
    <a class="nav-link" href="#">eee</a>
</li>
<li class="nav-item">
    <a class="nav-link" href="#">ffffffffff</a>
</li>
<li class="nav-item">
    <a class="nav-link" href="#">sdasdasdasd</a>
</li>
</ul>

Answer 1

只需使用媒体查询将更position 改为即可relative。请注意，您需要!important覆盖内联样式声明，因为内联样式具有最高的特异性。

@media screen and (max-width: 768px) { /* Bootstrap's mobile view breakpoint */
  .navbar-light {
    position: relative !important;
  }
}

在以下示例中可以看到：

@media screen and (max-width: 768px) { /* Bootstrap's mobile view breakpoint */
  .navbar-light {
    position: relative !important;
  }
}

@media screen and (max-width: 480px) {
  .navbar-light {
    position: relative !important;
  }
}

希望这可以帮助！:)