Bootstrap 4 feste top Navbar in Spalte

Question

Ich versuche, ein Layout mit einer Sidebar auf der linken Seite und auf der rechten Seite eine feste obere Navigationsleiste und darunter meine Website Inhalt zu erstellen. Was ich habe:

<div class="container-fluid"> 
     <div class="row no-gutter"> 

      <!-- left side --> 
      <div class="col-md-4 sidebar" style="background-color: red;"> 
       <p>test</p> 
      </div><!-- end left side --> 

      <!-- right side --> 
      <div class="col-md-8 offset-md-4"> 

       <!-- nav --> 
       <div class="row no-gutter" style="background-color: blue"> 
        <nav class="col-12 navbar fixed-top navbar-toggleable-md"> 
         <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbar" aria-controls="navbar" aria-expanded="false" aria-label="Toggle navigation"> 
          <span class="navbar-toggler-icon"></span> 
         </button> 
         <div class="collapse navbar-collapse" id="navbar"> 
          <ul class="navbar-nav"> 
           <li class="nav-item"> 
            <a class="nav-link" href="#">Home</a> 
           </li> 
          </ul> 
         </div> 
        </nav> 
       </div><!-- end nav --> 

       <!-- main content --> 
       <div class="row no-gutter" style="background-color: green;"> 
        <div class="col-12"> 
         <p> main content </p> 
        </div> 
       </div><!-- end main content --> 

      </div><!-- end right side --> 
     </div> 
</div> 

https://jsfiddle.net/0ka85tmn/1/

Ich kann nicht richtig die Navigationsleiste zu bekommen scheinen. Es bleibt nicht in meiner Spalte. Ich habe mit dem Positionsattribut herumgespielt, kann es aber nicht funktionieren.

Jeder kann helfen?

Answer 1

Mit position:fixed wird die Navigationsleiste aus dem normalen Dokumentfluss entfernt und relativ zur gesamten Seite gemacht, so dass sie nicht länger von der übergeordneten Seite enthalten ist. Aus diesem Grund werden Sie speziell die Position des navbar setzen müssen ...

.navbar { 
    position: fixed; 
    width: 100%; 
    top: 0; 
    left: 33.3333%; 
    z-index: 1; 
} 

Auch gibt es keinen Grund, sie enthalten in einem row und col-12.

Demo: http://www.codeply.com/go/5bPIH8Tbiw