使列的固定内容不能跨越整个页面宽度

Question

我创建了Plunkr来显示我的问题。

我有以下布局，其中我有一个左侧的菜单和右侧的页面内容。我想修改菜单，如果页面内容导致垂直滚动，菜单不会移动。

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

用下面的CSS：

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

菜单上有我想占用col-sm-2他们都在，但在申请position: fixed的宽度链接，它占用整个页面宽度。

Answer 1

通过将.main-nav设置为右：0;左：0;你正在使它跨越整个宽度。如果你删除了这些行（你可以设置top：0; left：0;如果你想保证菜单位置的安全），它应该以你想要的方式工作。

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

编辑：设置。主要-NAV的宽度继承将跨越它的上校-M-2