导航栏折叠菜单与实际导航栏的宽度不同。 我该如何解决？ 导航栏也不会出现在较小的窗口中

Question

我正在尝试制作一个粘性导航栏，它可以在较小的窗口（智能手机）中折叠。 第一个问题是它看起来像这样（包括图片）并且与实际导航栏的宽度不同。 第二个问题是导航栏不会在较小的窗口中淡入。 我对此相当陌生，因此欢迎提出任何建议。

编辑：我添加了一个代码笔

代码笔

图片

在此处输入图片说明

这是我在项目中包含的内容

enter code here

Answer 1

如果我检查您的页面，我可以看到您的面板位于#navbar并且此元素的两侧有1rem填充。 因此，当您放置100%宽度时，它是父级的宽度，即内边距。 您需要做的是不要在大容器本身上填充填充物。 相反，您将此填充单独放置在带有按钮的顶部栏和面板上。

您可能需要创建另一个容器来解决您的问题。 尽管您使用的是 Bootstrap（我不熟悉）。 删除填充可能并不那么容易，但我只能说这就是为什么您的导航面板在移动设备上不是全宽的原因。

我知道制作这种在桌面和移动设备上都能很好地使用面板的导航栏并不容易实现。 祝你好运。