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

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 设置为 right:0;左:0；你让它跨越整个宽度。如果你删除这些行(你可以设置 top:0; left:0; 如果你想确保菜单位置安全)它应该按照你想要的方式工作。

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

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