垂直引导导航将不会填充CSS网格父元素的宽度

垂直引导导航将不会填充CSS网格父元素的宽度,css,bootstrap-4,css-grid,Css,Bootstrap 4,Css Grid,下面是一个问题的JS提琴供参考: 我遇到了一个问题,我试图获得一个菜单来继承它的父元素的宽度,这是一个CSS网格列。为了排除故障,我将网格列的背景设置为红色。所以我基本上是想让左手边的深灰色垂直导航与红色网格柱的宽度相匹配 引导导航具有id#设置导航 我已经尝试过一些基本的东西,比如将引导类w-100添加到nav ul,或者在样式表中添加width:100%但是,这两个选项都会使菜单延伸到整个视口,而不是父元素(即网格列)。它的行为就像网格列不是它的父元素,但使用inspector我知道它是

下面是一个问题的JS提琴供参考:

我遇到了一个问题,我试图获得一个菜单来继承它的父元素的宽度,这是一个CSS网格列。为了排除故障,我将网格列的背景设置为红色。所以我基本上是想让左手边的深灰色垂直导航与红色网格柱的宽度相匹配

引导导航具有id
#设置导航

我已经尝试过一些基本的东西,比如将引导类
w-100
添加到nav ul,或者在样式表中添加
width:100%但是,这两个选项都会使菜单延伸到整个视口,而不是父元素(即网格列)。它的行为就像网格列不是它的父元素,但使用inspector我知道它是


请告诉我哪里出了问题。谢谢。

问题在于
#settings nav
被设置为
位置:绝对
,从而忽略父元素的尺寸。更改为
位置:相对
,工作正常