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的宽度设置为inherit将覆盖整个col.-m-2的宽度

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

1 个答案: