菜單溢出導致滾動

Question

以下網站的菜單https://www.thedegreetracker.com/有以下問題。菜單似乎比頁面的其他部分更寬。這導致瀏覽器窗口底部出現水平滾動條。當用戶滾動瀏覽器（或者在非常寬的計算機屏幕上最大化瀏覽器頁面）時，滾動時會導致頁面的其他部分（例如橫幅和頁腳）消失。

通過對比，下面的頁面不具有相同的問題：https://www.thedegreetracker.com/about_us。第二頁是我希望第一個頁面正確調整大小和頁腳大小的方式，並且沒有水平滾動。

據我所知，兩頁之間的HTML和CSS代碼幾乎是相同的。我發現的差異似乎沒有什麼區別。我花了數小時試圖弄清楚是什麼導致了這個問題，我現在要求新鮮的眼睛。我使用Bootstrap 3和Laravel，因爲它值得。

我希望這是一個簡單的修復，我只是想念。在實際的網頁上使用Chrome開發工具可能會有更多的運氣來解決這個問題，但下面是兩個頁面的HTML。據我所知，這兩個頁面的CSS完全相同。

下面是從破碎的頁面的代碼與廣泛的菜單和水平滾動

view-source:https://www.thedegreetracker.com/login

下面是從頁面的代碼與菜單，橫幅和頁腳正常工作

view-source:https://www.thedegreetracker.com/about_us

Answer 1

問題是在表單內，而不是菜單。您錯誤地在窗體內部使用了container類（由Bootstrap保留用於設置頁面寬度）。

此外，您的表單有一類.container，但是您正在覆蓋max-width屬性。這可能會導致響應問題。一般情況下，儘量不要觸及框架用於設置內容和佈局寬度的類上的width，max-width和min-width。如果必須，請使用內部容器。

回到你的問題，你應該可能已經在你的容器窗體裏面沒有任何課程。作爲一個經驗法則，嘗試使用不與您的框架的類名相沖突的類名。

爲了解決您的問題，無論是從您的窗體中刪除container或者，作爲這種類型的錯誤一般補丁，添加此CSS：

.container .container { 
    width: initial; 
}