如何防止響應網頁上的水平滾動？

我使用twitter bootstrap使我的應用程序響應。當我將瀏覽器窗口的寬度縮小到最小尺寸或在移動設備上查看頁面時（例如iPhone），用戶可以水平滾動。水平滾動量很小，但我想將它們一起移除。如何防止響應網頁上的水平滾動？

我相信這是由於我包含的img容器，但我不在這裏。該頁面的html位於此處：http://pastebin.ca/2347946。

有關如何防止頁面水平滾動，同時仍然保持在img容器中滾動的任何建議？

2013-04-02 sharataka

如何在沒有CSS的情況下解決CSS問題？ Pastebin不會永遠持續下去。 – cimmanon

按照bootstrap的文檔檢查你的代碼和語法，你可能在某處放置了行，容器或列錯誤 –

我很確定某個地方你的一個子元素超過了它的父元素的寬度。檢查你的代碼兩次，如果有任何盒子尺寸的內部子元素很大，原因之一是 - 當盒子寬度包括margin，padding，border超出限制時。我們可能還沒有將overflow: hidden;添加到它的外部父元素。在這種情況下，他們被認爲超越了他們的父元素，瀏覽器用滾動條顯示它。因此，通過刪除額外的邊距，填充，邊框來修復它，或者如果您只是不想要任何頭痛，只需將overflow:hidden;添加到外框即可。

來源

2013-04-03 20:43:23

我試着做你推薦的東西，但不知道在哪裏看。你知道我應該把它包括在頁面上嗎：http://warm-chamber-7399.herokuapp.com/ – sharataka

嘗試添加（在相關@-rule）一max-width：

img { 
    max-width: NNNpx; 
}

這樣就能避免img從過寬。

來源

2013-04-02 16:30:11 FelipeAls

我試圖包含這個最大寬度屬性，但不知道在哪裏包含它。給這個頁面的任何建議？ http://warm-chamber-7399.herokuapp.com/ – sharataka

我不確定你在回答中提到哪張圖片。 – sharataka

我有同樣的問題，並應用此修復它：

body { 
    overflow-x: hidden !important; 
} 
.container { 
    max-width: 100% !important; 
    overflow-x: hidden !important; 
}

要擴大一點，我只有在手機上的問題，所以這是我最後的代碼：

@media screen and (max-width: 667px) { 
    body { 
     overflow-x: hidden !important; 
    } 
    .container { 
     max-width: 100% !important; 
     overflow-x: hidden !important; 
    } 
}

我在Github上發現了這個問題，所以我猜Bootstrap的更新版本已經被修補了。

來源

2016-01-29 06:43:53

輝煌的作品 – theWhiteFox

感謝你它真的很簡單，但作品 – navotera

「overflow：hidden;」風格是不是預防的補救措施。如果你想防止這種情況，你必須檢查身體比身體大的元素。當你在「.container」類（twitter bootstrap）之外使用某個「填充」或「邊距」的div時，會發生這種情況。因此，刪除容器類以外的所有填充和邊距。

來源

2017-08-30 07:41:30

如何防止響應網頁上的水平滾動？

回答

相關問題