如何防止在响应网页上水平滚动? [英] How to prevent horizontal scrolling on responsive webpage?

问题描述

我正在使用Twitter引导程序使我的应用程序响应.当我将浏览器窗口的宽度缩小到最小尺寸或在移动设备(例如iPhone)上查看页面时，用户可以水平滚动.水平滚动量很小，但我想将其全部删除.

I'm using twitter bootstrap to make my app responsive. When I shrink the width of my browser window to the minimum size or view the page on a mobile device (iPhone, example), the user is able to scroll horizontally. The amount of horizontal scroll is small but I would like to remove it all together.

我相信这是由于包含的img容器引起的，但我不在这里.该页面的html位于以下位置: http://pastebin.ca/2347946 .

I believe it's due to the img container that I'm including, but I'm not here. The page's html is located here: http://pastebin.ca/2347946.

关于如何在保持img容器中滚动的同时防止页面水平滚动的任何建议?

Any advice on how to prevent the horizontal scroll for the page while still maintaining the scrolling in the img container?

推荐答案

我很确定您的子元素之一的某个地方超出了其父元素的宽度.检查您的代码两次，如果内部子元素的框大小是否由于以下原因之一而变大-当框宽度包括 margin ， padding ，边界超出了限制.而且我们可能还没有在其外部父元素中添加 overflow:hidden; .在这种情况下，它们被认为超出了其父元素，浏览器通过滚动条显示了它们.因此，请通过删除多余的边距，内边距，边框来解决此问题，或者如果您不想让头痛，只需尝试在外框中添加 overflow:hidden; .

i am pretty sure somewhere one of your child element is exceeding the width of its parent element. Check you code twice, if there any box-size of inner child elements is large because of one of the reasons like- when the box width including margin, padding, border go beyond the limit. And we possibly haven't added overflow: hidden; to its outer parent element. In this case they are considered reaching beyond their parent element and browsers show it with the scrollbar. So fix it via removing extra margins, paddings, borders or if you just don't want any headache, just try to add overflow:hidden; to the outer box.

这篇关于如何防止在响应网页上水平滚动?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！