Html 引导菜单：垂直拉伸以填充li

这个问题有微妙的变化，但我找不到任何对我有用的东西

我有一个引导ul，我需要锚元素来完全填充

li

。问题是一些菜单文本被包装到第二行，我需要扩展菜单其余部分的

a

元素以填充新的空间

这是我正在使用的HTML

请注意，菜单1没有填满菜单栏的整个高度，因为菜单2有第二行文本。我希望“菜单1”展开以填充菜单栏的高度

引导盒




菜单1
菜单1内容

菜单2
菜单2内容

您可以将flexbox用于容器（

.nav

），并将

高度：100%

分配给其中的所有

a

标记：

.nav{
显示器：flex；
}
李国荣先生{
背景：#fa0；
}
李娜先生{
身高：100%；
}

引导盒




菜单1
菜单1内容

菜单2
菜单2内容

这就是

float

的工作原理，为了获得所需的输出，您可以添加自己的css，使其如下所示：

注意：我用过

！重要信息

由于代码片段获取资源的方式，在实际情况下，如果您在引导后加载了CSS，则不需要这样做

.nav药丸{
显示器：flex；
}
.nav药丸>li>a{
身高：100%；
显示：flex！重要；
对齐项目：居中；
}

菜单1
菜单1内容

菜单2
菜单2内容