如何在响应式网页中避免水平滚动？

Question

我正在使用Twitter Bootstrap来制作一个响应式的应用程序。当我将浏览器窗口缩小到最小尺寸或在移动设备上查看页面（例如iPhone）时，用户可以水平滚动。虽然水平滚动量很小，但我希望完全消除它。

我认为这是因为我包含了img容器，但我不确定。页面的HTML位于此处：http://pastebin.ca/2347946。

有什么建议可以防止页面的水平滚动，同时仍然保持img容器内的滚动？

- sharataka

---

CSS问题如何在没有CSS的情况下解决？Pastebin不会永远存在。 - cimmanon

请根据Bootstrap的文档检查您的代码和语法，您可能在某个地方错误地放置了行、容器或列。 - Deepak Yadav

Answer 1

我曾经也遇到过同样的问题，并采用以下方法进行修复：

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的新版本已经修复了这些问题。

- The Onin

Answer 2

我很确定你的某个子元素超出了其父元素的宽度。请仔细检查你的代码，如果任何一个内部子元素的盒子大小因为以下原因之一而变大——当包括margin、padding、border的盒子宽度超过限制时，请确保已将overflow: hidden;添加到其外层父元素中。在这种情况下，它们被认为超出其父元素，浏览器会显示滚动条。因此，通过去除额外的边距、填充、边框来修复它，或者如果你不想麻烦，只需尝试向外围盒子添加overflow:hidden;。

- Akshaya Raghuvanshi

---

我尝试按照您的建议去做，但不确定应该在哪里查找。您知道我应该在哪个页面上包含它吗：http://warm-chamber-7399.herokuapp.com/？ - sharataka

Answer 3

"overflow: hidden;"样式是解决问题的方法而不是预防措施。 如果你想要预防这种情况，你需要检查你的body元素是否比body更大。 当你在".container"类（Twitter Bootstrap）外部带有一些“padding”或“margin”时会发生这种情况。 因此，请移除容器类外部的所有填充和边距。

- Motahar Hossain

Answer 4

原来我缩放超过了100%，导致页面滚动。使用Cmd+0可以将缩放恢复到100%，解决了滚动问题。

- Panda

Answer 5

尝试在相关的@规则中添加max-width:

img {
    max-width: NNNpx;
}

这将防止img过宽。

- FelipeAls

---

我尝试着加入这个max-width属性，但不确定应该在哪里加入。请问在这个页面有什么建议吗？http://warm-chamber-7399.herokuapp.com/ - sharataka

我不确定你在回答中指的是哪个图像。 - sharataka