Bootstrap 4多個固定頂部的導航欄

Question

Bootstrap 4中有多個固定頂部的導航欄可以相互顯示嗎？

1目前覆蓋另一個不是我想要的。

Answer 1

是的，這是可能的，但你必須相應地定位第二個。 Navbar的高度是〜56px。

.fixed-top-2 { 
    margin-top: 56px; 
} 

body { 
    padding-top: 105px; 
} 

<nav class="navbar navbar-toggleable-sm bg-faded navbar-light fixed-top fixed-top-2"> 
    <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbar1"> 
     <span class="navbar-toggler-icon"></span> 
    </button> 
    <a href="/" class="navbar-brand">One</a> 
    <div class="navbar-collapse collapse" id="navbar1"> 
     <ul class="navbar-nav"> 
      .. 
     </ul> 
    </div> 
</nav> 

<nav class="navbar navbar-toggleable-sm bg-inverse navbar-inverse fixed-top"> 
    <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbar2"> 
     <span class="navbar-toggler-icon"></span> 
    </button> 
    <a href="/" class="navbar-brand">Two</a> 
    <div class="navbar-collapse collapse" id="navbar2"> 
     <ul class="navbar-nav"> 
      .. 
     </ul> 
    </div> 
</nav> 

Demo: Bootstrap 4 Multiple fixed-top Navbars

在某些情況下，它可能是更好的使用single fixed-top DIV to contain both。