在移動視口中時，如何阻止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: 480px) { .navbar-light { position: relative !important; } } 

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous"> <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 2

• 您可能已經使用了內置類sticky-top https://getbootstrap.com/docs/4.0/utilities/position/

粘頂

將元素從一個邊緣到另一個邊緣放置在視口的頂部，但僅在滾動經過該元素之后才可以。 .sticky-top實用程序使用CSS的position: sticky ，並非所有瀏覽器都完全支持它。

Microsoft Edge和IE11將呈現position: sticky作為position: relative 。 這樣，我們將樣式包裝在@supports查詢中，從而將粘性限制為僅適當地可以呈現它的瀏覽器。

<div class="sticky-top">...</div>

• 並在@media screen and (max-width: 767px)創建一個自定義斷點， @media screen and (max-width: 767px)匹配flex-md-row斷點。

https://getbootstrap.com/docs/4.0/layout/overview/#sensitive-breakpoints

//額外的小型設備（縱向手機，小於576px）

//沒有媒體查詢，因為這是Bootstrap中的默認設置

//小型設備（橫向手機，576像素及以上）

@media（最小寬度：576像素）{...}

//中型設備（平板電腦，768像素及以上）

@media（最小寬度：768像素）{...}

//大型設備（台式機，992px及以上）

@media（最小寬度：992px）{...}

//特大型設備（大型台式機，1200px及以上）

@media（最小寬度：1200px）{...}

 @media screen and (max-width: 767px) { .sticky-top { position: relative !important; } } 

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" > <div class="navbar-light" style="background-color: #fff0d8;"> <div class="container"> <ul class="sc-nav nav navbar-nav nav-fill w-100 flex-md-row sticky-top"> <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> <div style="height:200vh">give a scroll to the demo</div>