调整大小时出现渲染问题

Question

我正在使用bootstrap 3.3.7，并使用标准的bootstrap类创建菜单。我已经对其进行了重新样式设置，以便将颜色设置为带有紫色底色的白色。最初加载页面时，一切都很好。当我用鼠标减小屏幕宽度时，菜单开始按预期折叠，但菜单似乎消失了。如果我停止减小屏幕尺寸，然后将鼠标移至菜单应位于的位置，则它将重新显示。因此，该操作有效，菜单在移动时未保持其配色方案。在某个地方错过了花样吗？

如果我将屏幕尺寸调整为767，以使菜单上出现“汉堡”按钮，则会出现相同的问题。我单击了汉堡包，直到将鼠标移到菜单所在的屏幕左侧上，似乎什么也没显示。

Answer 1

当您使用鼠标调整视口大小时，由于javaScript正在执行该调整大小，因此最终结果始终无法正确显示。

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

另外，请从引导程序检查内置样式，当您在平板电脑或移动设备上使用时，它可能会更改。

Answer 2

codepen.io/bilpor/pen/gjRQgj

因此，在查看代码笔后，这是桌面结果。 这是我将鼠标悬停在其上之前的菜单。

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

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

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