調整大小時出現渲染問題

Question

我正在使用bootstrap 3.3.7，並使用標准的bootstrap類創建菜單。 我已經對其進行了重新樣式設置，以便將顏色設置為帶有紫色底色的白色。 最初加載頁面時，一切都很好。 當我用鼠標減小屏幕寬度時，菜單開始按預期折疊，但菜單似乎消失了。 如果我停止減小屏幕尺寸，然后將鼠標移至菜單應位於的位置，則它將重新顯示。 因此，該操作有效，菜單在移動時未保持其配色方案。 在某個地方錯過了花樣嗎？

如果將屏幕尺寸調整為e 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!); } });