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。