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

问题描述

我正在使用 twitter bootstrap 来使我的应用具有响应性.当我将浏览器窗口的宽度缩小到最小尺寸或在移动设备(例如 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, >border 超出限制.我们可能还没有将 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屋！