Bootstrap 4固定頂部導航欄內部列

Question

我試圖創建一個佈局，在左側和右側的側邊欄固定頂部導航欄，並在我的網站內容下。 我有什麼：

<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/

我似乎無法得到正確的導航欄。它不會留在我的專欄中。我玩過位置屬性，但無法使其工作。

任何人都可以幫忙嗎？

Answer 1

使用position:fixed將navbar從正常的文檔流中取出並使其相對於整個頁面，因此它不再包含在其父項中。出於這個原因，你需要專門設置導航欄的位置...

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

此外，沒有任何理由來遏制它在row和col-12。

演示：http://www.codeply.com/go/5bPIH8Tbiw