列の固定内容をページ幅全体に広げないようにする

Question

問題を示すためにPlunkrを作成しました。

私は、左側にメニューがあり、右側にページのあるレイアウトがあります。私はメニューを修正したいので、ページの内容が垂直スクロールになった場合、メニューは移動しません。以下のCSSで

<div class="container-fluid"> 
    <div class="row"> 
    <div class="col-sm-2"> 
     <div class="main-nav"> 
     <!--Menu here--> 
     </div> 
    </div> 
    <div class="col-sm-10"> 
     <!--Page contents here--> 
    </div> 
    </div> 
</div> 

：

.main-nav { 
    position: fixed; 
    left: 0; 
    right: 0; 
    z-index: 1; 
} 

メニューは、私は、彼らがしているcol-sm-2の幅を取るしたいのですが、リンクを持っていますが、position: fixedが適用されたとき、それは取りページ幅全体。

Answer 1

.main-navをright：0に設定すると、左：0;それは幅全体に広がっています。これらの行を削除した場合（top：0; left：0;メニュー位置を安全にしたい場合）、それはあなたが望むように動作するはずです。

.main-nav { 
    position: fixed; 
    z-index: 1; 
    width:inherit; 
    /*OPTIONAL with current code*/ 
    top:0; 
    left:0; 
} 

EDIT：継承する.main-NAVの幅を設定するには、それに問題が解決しない大佐-M-2