Bootstrap 4 Wiele navbands ze stałą górą

Question

Czy w Bootstrap 4 można wyświetlać wiele podrzędnych wielu navbars ze stałą górą?

Obecnie 1 nakłada się na drugą, co nie jest tym, czego chcę.

Answer 1

Tak, jest to możliwe, ale musisz odpowiednio ustawić drugą. Wysokość paska nawigacyjnego wynosi ~ 56 pikseli.

.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

W niektórych sytuacjach może być lepiej użyć single fixed-top DIV to contain both.