调整大小时的渲染问题

Question

我正在使用引导程序 3.3.7，并且使用标准引导程序类来创建菜单。我重新设置了它的样式，将颜色设置为白色，背景为紫色。最初加载页面时一切都很好。当我用鼠标减小屏幕宽度时，我的菜单开始按预期折叠，但菜单似乎消失了。如果我停止减小屏幕尺寸，然后将鼠标移到菜单应该在该点上的位置，它就会重新出现在视图中。所以这个动作是有效的，菜单在移动时没有保持它的配色方案。是不是在某个地方漏了个把戏？

如果我将屏幕大小调整为 e 767 以使我的“汉堡”按钮出现在菜单中，我会遇到同样的问题。我单击汉堡包，但似乎什么都没有显示，直到我将鼠标移到菜单所在的屏幕左侧。

Answer 1

当您使用鼠标调整视口大小时，最终结果并不总是正确显示，因为 javaScript 正在处理该调整大小。

尝试仅使用给定的特定窗口大小：Ipad Pro、Ipad 等。选择后使用 CTRL + F5 或 CTRL + SHIFT + R 进行硬刷新，然后告诉我问题是否仍然存在。

此外，请检查引导程序中的内置样式，当您使用平板电脑或移动设备时，它可能会发生变化。

Answer 2

codepen.io/bilpor/pen/gjRQgj

所以看到codepen后，这是桌面结果。 这是我将鼠标悬停在它上面之前的菜单。

这是我将鼠标悬停在元素上后的图像。

关于您的问题，请使用您的 javascript 代码仅在桌面上运行。

 $(document).ready(function () {
    if (screen.width < 1024) {
        // your code that affect navbar here
    }
    
    else {
        alert(Error!);
    }
});