水平滚动问题

Question

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

我尝试使用'divide et impera'删除代码片段以找到问题。当我删除了几乎整个内容/网站时水平滚动消失了，所以我想它与主容器有关？

我似乎无法弄清楚这个问题，过去几个小时一直撞到墙上。

Answer 1

我在Apple iphone 4中看到了这个水平滚动，只需解决这个问题，只需定义这个css：

html,body{
    overflow-x:hidden;
 } 

希望有所帮助

Answer 2

不要从@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;
}

你已经定下来了。祝你好运。