Html 引导4导航条开关位置随定义高度变化？

如果你能想出一个更好的标题，请为这个问题建议一个更好的标题

我现在在两个独立的项目中遇到了这个问题。在引导4中，如果导航元素具有定义的高度，则单击导航条切换按钮时，导航条切换按钮的位置为移动位置

我创建了一个小提琴来显示问题：

尝试在导航栏自定义有高度时单击图标，并在未定义高度时重试

有人能解释为什么会发生这种情况吗？如果有，解决办法是什么

HTML:

---

我想你指的是：

.navbar {
    padding: .5rem 1rem;
}

正文{
颜色：黑色；
}
.导航栏海关{
高度：80px；
背景色：#FDC529；
字体系列：“机器人浓缩”，无衬线；
边框宽度：0 0 1px；
}

我正面临着一个确切的问题，尝试了一些实验并修复了它，只需在自定义css文件中定义它，以覆盖填充问题：

.navbar {padding: 1.5rem 1rem;}

---

似乎是填充导致了重新定位，但是如果定义了高度，则单击链接时导航栏仍然不会向下移动。感谢您的响应，我尝试了您的建议，但仍然存在相同的错误。我尝试了您的js提琴，它起到了作用。让我在那里插入一个runnable.BTW，我替换了引导cdn，因为您当前的cdn运行时出现脚本错误。@如果您删除类容器，则会产生相同的结果。我使用了您的代码，但它并没有加固导航栏事实上我已经将其写入了一个span ytag，然后单击“无”按钮，请共享完整内容code@nikhilsugandh完整的代码现在包含的内容太多，不值得分享，我在帖子中链接的小提琴包含了所有相关的代码并复制了这个问题。我面临着同样的问题。你解决了这个问题吗？感谢you@JoffreyHernandez不幸的是，我目前使用的是，高度可以由内部其他元素的高度控制。例如，您可以将顶部和底部填充添加到li元素，并且它可以成功地工作。

.navbar {
    padding: .5rem 1rem;
}

.navbar {padding: 1.5rem 1rem;}