水平滚动问题[关闭]

Question

我使用引导程序完成了this website 的编码，现在我遇到了关于不应该发生的水平滚动的问题。这是我第一个使用 boostrap 的网站。

我尝试通过删除代码的 sn-ps 来使用“divide et impera”来查找问题。当我删除几乎整个内容/网站时，水平滚动消失了，所以我想它与主容器有关？

我似乎无法找出问题所在，过去几个小时一直在用头撞墙。

Answer 1

不要从@Tulio Castro 那里拿走任何东西，因为将overflow-x: hidden; 放在body 上应该可以解决这个问题。然而，这是一个 hacky 修复，因为它并没有解决问题本身，而是修复了当前可见的问题后果。我想您可能想知道实际的问题——为什么会发生这种情况以及您可以做得更好。

首先让我说引导程序是一个微妙的系统：每次应用自己的样式时，都需要检查以确保您的样式不会与引导程序的样式冲突。

所以这里是修复：

当水平滚动条可见时，你可以运行这个 jQuery，它会告诉你哪些元素导致了溢出：

$('*').filter(function() { return $(this).width() > $('body').width(); });

在你的情况下，它将返回三个罪魁祸首，他们都是.row 元素：

1) 第一个.row 需要嵌套在.col-xs-12 元素中。您不能将 .row 作为引导程序中 .row 元素的直接子元素。

2) 第二个.row 有一个父类.partneri。您将自定义 CSS 应用于此父元素，这破坏了引导程序。在这种情况下，bootstrap 想要左右 10px 的填充，但您的 CSS 将其取消：

.parteneri
{
    ....
    padding: 10px 0 10px 0;
}

改成

.parteneri
{
    ....
    padding: 10px;
}

你应该没事的。

3) 第三个.row 有同样的东西。具有 .sub-footer 类的父级会破坏引导程序的填充。改变

.sub-footer
{
    border-top: 2px solid #f8f8f8;
    padding: 10px 0 4px 0;
}

到

.sub-footer
{
    border-top: 2px solid #f8f8f8;
    padding: 10px 10px 4px 10px;
}

你已经准备好了。祝你好运。

Answer 2

我在apple iphone 4中看到了这个水平滚动，解决一下，直接定义这个css：

html,body{
    overflow-x:hidden;
 } 

希望对你有帮助