Bootstrap 4 fixed top navbar insideコラム

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 { 
    position: fixed; 
    width: 100%; 
    top: 0; 
    left: 33.3333%; 
    z-index: 1; 
} 

はまた、rowとcol-12でそれを格納する理由はありません。

デモ：http://www.codeply.com/go/5bPIH8Tbiw