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

我已经创建了一个显示我的问题

我有下面的布局，左边是菜单，右边是页面内容。我想修复菜单，这样，如果页面内容导致垂直滚动，菜单将不会移动

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

---

菜单中有我想占用

col-sm-2

宽度的链接，但是当应用

position:fixed

时，它会占用整个页面宽度。

通过将.main nav设置为right:0；左：0；你让它横跨整个宽度。如果删除这些行（可以将顶部设置为0；左侧设置为0；如果希望菜单位置的安全性），它应该按照您希望的方式工作

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

---

编辑：将.main nav的宽度设置为inherit将跨越col.-m-2的整个宽度

@Chirag，但这并不能解决问题。感谢您的回复！这解决了菜单项占用整个页面宽度的问题。但是，现在如何让它们占据整个

col-sm-2

？很抱歉，我没有意识到我只解决了一半的问题，请参见编辑：）我实际上更新了我的Plunkr。有一个

nav菜单

元素（Angular2组件）没有包含在我的原始标记中。即使在

width:inherit

之后，这似乎也是阻止此操作的原因。介意再看一眼吗？谢谢你的帮助。你需要这两种元素吗？如果您将css从.main nav移动到.nav菜单，它将按您所希望的方式工作，但下一步执行的次数越多，它将变得越困难。不幸的是，在Angular2中，没有

replace:true

，因此我将需要这两个选项。

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